Flexbox: move middle element to the next line

Question

I have a flex item that has three divs inside of it.

┌────────────────────────────────────────┐ |                WRAPPER                 | |   ┌─────────┬───────────┬──────────┐   | |   |  LEFT   |   CENTER  |   RIGHT  |   | |   |         |           |          |   | |   └─────────┴───────────┴──────────┘   | └────────────────────────────────────────┘ 

And I want to move the center column to the next line in small screens (less than 600px). It should occupy the 100% of the width of the screen.

The problem I have is that when the center column comes to the next line, the right column does not fit on the wrapper.

Here is my HTML code:

<div id="wrapper">     <div class="block left">Left</div>     <div class="block center">Center</div>     <div class="block right">Right</div> </div> 

Here is my CSS code:

html, body{   height: 100%; }  body{   margin: 0; }  #wrapper{   display: flex;   width: 100%;   height: 50px;   align-items: center;   text-align: center; }  .block{   height: 50px; }  .left{   width: 20%;   background-color: red;   order: 1; }  .center{   width: 60%;   background-color: green;   order: 2; }  .right{   width: 20%;   background-color: blue;   order: 3; }  @media all and (max-width: 600px) {   #wrapper{     flex-flow:column wrap;      height: 100px;   }   .center {     width: 100%;     order: 3;   }    .left{     width: 50%;   } } 

JSFiddle where you can see how it is displayed.

Is it possible to move the middle column to the next line occupying 100% of the width of the screen using flexbox? If it is, what am I missing?

Thanks in advance!

Answer 1

Something like this?

https://jsfiddle.net/wqLezyfe/2/

@media all and (max-width: 600px) {   #wrapper{     flex-wrap:wrap;     height: 100px;   }   .center {     width: 100%;     order: 3;   }    .left{     width: 50%;   }   .right{     width:50%;     order:2;    } }