Ка сверстать такие колонки?

Question

[Андрей]

Вот схема: joxi.ru/n2YRz7Kujy7E7A

В мобильном разрешении все три колонки идут в один ряд, а на десктопе верхняя и нижняя образуют одну левую колонку, а средняя - правую.

Вырывать из потока нельзя - содержимое не известно. Флексы так же не подходят.

Буду благодарен даже просто за идею, код не обязательно - сам напишу :)

Comments

[Kuat Mustafin]

Можно и с FlexBox, почитайте про order и flex-flow: column wrap;

Answer 1

[Clever_Coyote]

Что-то вроде этого?
codepen.io/Affiction/pen/LNPYZK

Answer 2

[Combat7]

Делай и 1 и 3 флоат левт, а 2 райт

Answer 3

[Kovalsky]

Ну например с флоатами, как-то так.

Answer 4

[Алексей Николаев]

Я бы сделал 1 и 3 флоат left, а 2 - просто блочный элемент без флоата. Тогда он будет наезжать на 1 и 2, причем с автоматической шириной. В мобильной же все просто - только display block без флоатов.

Answer 5

[Евгений]

Надо разместить html как 1-3-2 тогда всё будет просто

Answer 6

[aleksandrozz]

Позиционированием?

Comments

[aleksandrozz]

Float тоже можно я думаю, если я правильно понимаю