Comportamiento "rowspan" con flexbox

Dado este marcado:

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

Y 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

¿Hay alguna manera de poner el cuadro rojo en la secuencia de la fila anterior? Me gustaría evitar modificar el marcado.

La idea aquí es que los elementos deben tener diferentes diseños entre el modo vertical y horizontal, y que la única forma de hacerlo en CSS solo es usar flexbox con elorder propiedad. Hasta donde yo sé, el uso de un elemento intermedio bloquearía a sus hijos.

Respuestas a la pregunta(1)

Su respuesta a la pregunta