Flexbox: reordering and stack columns

Question

I have three columns that I want to rearrange on a specific screen size.

The current order is two columns 1/4 wide and 1/2 wide.

I want to make two columns 1/4 wide by 1/2 wide and put them at the beginning.

I can replicate it using float, but I cannot determine the way using flexbox.

I am trying to assemble two columns of width 1/4, accounting for 50% of the parent width.

Here is the fiddle .

.col1of2 { width: 50%; background: red; } .col1of4 { width: 25%; background: yellow; } .col1of4--last { background: blue; } .col-container { display: flex; } @media all and (max-width: 1000px) { .col1of2 { order: 3; } .col1of4 { order: 1; } } /* css for working example */ .ex1of2 { width: 50%; background: red; float: right; } .ex1of4 { display: inline-block; width: 50%; background: yellow; } .ex1of4--last { background: blue; } 

 <H4>what i have</H4> <div class="col-container"> <div class="col col1of4"> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> </div> <div class="col col1of2"> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> </div> <div class="col col1of4 col1of4--last"> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> </div> </div> <!-- what i want it to look like when it swaps --> <H4>what i want to achieve</H4> <div class="ex-container"> <div class="ex ex1of4"> <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> </div> <div class="ex ex1of2"> <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> </div> <div class="ex ex1of4 ex1of4--last"> <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> </div> </div> 

Answer 1

The key to this layout is to switch the flex container to column wrap in the media request.

You must also determine the height for the container so that the elements know where to wrap them.

 .col-container { display: flex; } .col1of2 { width: 50%; background: red; } .col1of4 { width: 25%; background: yellow; } .col1of4--last { background: blue; } @media all and (max-width: 1000px) { .col-container { flex-direction: column; flex-wrap: wrap; height: 100px; } .col1of2 { order: 1; } .col1of4 { width: 50%; } } 

 <div class="col-container"> <div class="col col1of4"> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> </div> <div class="col col1of2"> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> </div> <div class="col col1of4 col1of4--last"> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> </div> </div> 

fixed violin