Displaying Row Of Divs Vertically Issue

I'm having a slight issue with getting my three div boxes to display vertically while in mobile view. When in desktop/tablet view I would like them to remain as three divs in the o

Solution 1:

Use flexbox, you can set the container to display flex-direction: column while on mobile and flex-direction: row while on desktop or tablet.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Solution 2:

No need for display block as you already using flex box just give the container on mobile view flex-direction: column;

Solution 3:

You can achieve this easily with display: grid

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
}

then in your media query change the template to:

.container{
    grid-template-columns: 1fr;
  }