html - Flexbox responsive row column layout

Question

I have the following

HTML

<div>
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>

I want to achieve the following layouts using flexbox.

Mobile

Tablet

Desktop

I have no problem with mobile and desktop layouts, but could not solve it for tablets.

How to force .center div appear after .letf and .right? Is there a way to achieve it with flexbox?

Answer 1

This code will achieve what you want in tablet, you can wrap it in a media query for tablet size.

The key is to set the width of left and right to 50%, center to 100% and then declare "flex-flow: row wrap;" on the container.

#container{
  display:flex;
  flex-flow: row wrap;
}
.left{
  order: 1;
  width:50%;
  background-color: red;
}
.right{
  order: 2;
  width:50%;
  background-color: green;
}
.center{
  order: 3;
  width:100%;
  background-color: blue;
}

<div id="container">
   <div class="left">left</div>
   <div class="center">center</div>
   <div class="right">right</div>
</div>

Here's a pen with a demo https://codepen.io/Washable/pen/ZXxYPJ