"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 a way to put the red box in the previous row stream ? I would like to avoid modifying the markup.

The idea here is that the elements should have different layouts between portrait and landscape mode, and that the only way to do it in CSS-only is to use flexbox with the order property. As far as I know, using an intermediate element would lock 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 codepen sample with -webkit- prefixes

UPDATE! Tuned pen with landscape/portrait ratios