Как разместить блоки посредством Flexbox без дополнительных оберток?

Question

[Don Puh]

Как можно посредством flex без дополнительных оберток разместить блоки как на картинке?
Исходный "Вариант 1", нужен "Вариант 2".

<div class="container">

      <aside class="left">
         left
      </aside>

      <main class="center">
         center
      </main>

      <aside class="right">
         right
      </aside>

</div>

Comments

[Антон Литвиненко]

Может чем поможет
https://codepen.io/tobiasahlin/pen/JVmLRa

[Don Puh]

Антон Литвиненко, огромное спасибо!
Получилось благодаря свойству: flex-flow: column wrap; ну и конечно же order.

Answer 1

[Владимир]

flex-direction: column
flex-wrap: wrap

у дочерних регулировать order и base
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

[Don Puh]

Я знаю про order. Но с остальным не могу понять, как вытеснить центральный блок направо, чтобы он занял всю высоту. Вот код: https://codepen.io/donpuh/pen/oNBaPoW

[Ankhena]

Don Puh, это возможно только при заданной высоте.
Используйте гриды.

p.s. и смените названия классов.

[Владимир]

Don Puh, У центрального flex-basis: 100% у остальных 50%

.left,.right {
  flex: 1 1 50%
}
.main {
  flex: 1 1 100%
}

[Don Puh]

Ankhena, помогло решение с: flex-flow: column wrap; ну и конечно же order.
Владимир, если несложно, было бы неплохо код... у меня не получилось.

[Владимир]

Don Puh,
Я привел кусок, который я добавил к вашему коду на codepen