Есть 3 блока идущих по горизонтали,как 2 из них сделать по вертикали?

Question

[viktorulyushev]

Есть такая структура

<div>
   <div></div>
   <div></div>
   <div></div>
</div>

Как 2 первых блока расположить друг под другом,а 3 блок чтобы шел за ними по горизонтали,не меняя верстку?

Answer 1

[Андрей Федоров]

Например так https://codepen.io/aliencash/pen/qKJPbX?editors=1100

Answer 2

[Павел Новиков]

использовать Bootstrap?

Comments

[viktorulyushev]

я не могу менять верстку,только привязываться стилями к существующим классам

Answer 3

[ljutaev]

https://codepen.io/ljutaev/pen/YvJrKY
На гридах это конечно просто!
а вот на флексе без дополнительного дива сделать не могу. Наверное и не получиться)))

Comments

[viktorulyushev]

через грид хорошо получается)

Answer 4

[sdgroup14]

Грид не кроссбраузерный... лучше сделать последний элемент абсолютом а 2 flex или float или inline-block. все зависит от задачи. Мой совет абсолютом. Кстати ljutaev указал почти верное решение. :) только flex-direction не row a column если можно ограничить высоту... первые 2 друг под другом а 3тий в новой строке на 100% высоты. Опять же все зависит от задачи. Можно и без грид обойтись

https://codepen.io/sdgroup14/pen/KeGQvp?editors=1100