Large screen:

[a][c][d][e][f] [b][ ][ ][ ][ ]

min 1000

 [a][c][e] [ ][ ] [d][f] [b][ ][ ]

min 600

 [a] [c] [e] [f] [b]

blocks a and b are half the size of the rest

    1 answer 1

     #wrapper { display: flex; flex-direction: column; flex-wrap: wrap; padding: 0; list-style-type: none; height: 200px; } #wrapper>div { border: solid; width: 30%; } #a { order: 1; height: 45%; } #b { order: 2; height: 45%; } #c { order: 3; height: 100%; } #d { order: 4; height: 100%; } #e { order: 5; height: 100%; } #f { order: 6; height: 100%; } @media(max-width:900px) { #wrapper { background-color: red; } #a { order: 1; height: 45%; } #b { order: 2; height: 45%; } #c { order: 3; height: 45%; } #d { order: 4; height: 45%; } #e { order: 5; height: 45%; } #f { order: 6; height: 45%; } } @media(max-width:600px) { #wrapper { background-color: green; } #a { height: 20px; order: 1; } #b { height: 20px; order: 6; } #c { height: 20px; order: 2; } #d { height: 20px; order: 3; } #e { height: 20px; order: 4; } #f { height: 20px; order: 5; } } 
     <div id="wrapper"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> <div id="d">d</div> <div id="e">e</div> <div id="f">f</div> </div>