Rowspan behavior with flexbox

Question

Given this markup:

<div class="foo"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> 

And CSS:

 .foo { display: flex; flex-wrap: wrap; } .a { flex: none; width: 50%; height: 100px; background: green; } .b { flex: none; width: 50%; height: 200px; background: blue; } .c { flex: none; width: 50%; height: 100px; background: red; } 

jsFiddle

Is there any way to put the red box in the previous row stream? I would like to avoid changing the markup.

The idea here is that the elements should have different layouts between portrait and landscape modes, and the only way to do this only in CSS is to use flexbox with the order property. As far as I know, using an intermediate element blocks its children.

Answer 1

Is this what you are looking for?

 .foo { display: flex; flex-wrap: wrap; flex-direction: column; height: 200px; } .a, .c { flex: 0 0 50%; background: green; } .b { flex: 0 0 100%; order: 1; background: blue; } .c { background: red; } 

Quick code example with -webkit-prefixes

UPDATE ! Customized landscape / portrait pen