css - "rowspan" behavior with flexbox -

given 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 way put red box in previous row stream ? avoid modifying markup.

the idea here elements should have different layouts between portrait , landscape mode, , way in css-only use flexbox order property. far know, using intermediate element lock children.

is 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 codepen sample -webkit- prefixes

update! tuned pen landscape/portrait ratios