How to create flexbox responsive layout with multiple columns and rows

Question

I'm trying to create a mobile & desktop responsive container that looks like this. The base HTML looks like the following and I can add any elements or classes as needed.

<div class="container">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>

My own attempt led me to this. The desktop version is just how I want it. But boxes 2 and 3 on mobile are swapped. I want it to display vertically and sequentially from 1 to 3. If I could put a container on 2 and 3, I would be able to use flex-direction: column-reverse in the media query but then the desktop view would be incorrect because I need the container on boxes 1 and 3 to put them in a column and set the flex-basis. Any input on how else to approach this would be appreciated.

Answer 1

One approach is to wrap your first two divs in a container, and set their flex-direction to row for your desktop view.

Then change the flex-direction to column at your mobile breakpoint (I've used 600px):

.container {
  display:flex;
  flex-direction:column;
}

.row-container {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

.box {
  border:3px solid #000;
  width:300px;
  height:300px;
  margin-bottom:10px;
}

.box2 {
  width:200px;
  height:200px;
 }

@media only screen and (max-width: 600px) {
  .row-container {
    flex-direction:column;
  }
  
  .box2 {
    width:300px;
    height:300px;
  }
}

<div class="container">
  <div class="row-container">
    <div class="box1 box">1</div>
    <div class="box2 box">2</div>
  </div>
  <div class="box3 box">3</div>
</div>