Как сделать такое с помощью FLEX?

Question

[Евгений]

Здравствуйте!
Долго пыхтел сам... сдался...
Как сделать такое на Flex?

на большом экране два нижних блока, оранжевый и розовый, должны вставать в средний ряд


нужно второй и третий ряд оборачивать в контейнеры или есть другой способ?

UPD. Забыл сказать, что два нижних блока должны перепрыгивать вниз вместе. Т.е. либо во втором ряду все блоки вместе, либо оранжевый и розовый в третьем ряду.

Answer 1

[x-comzbk]

Недавно встретил очень удобный инструмент для построения различных комбинаций на flex вот пример на нем уже построенного как вам надо (верхнего) экрана, ну а при другом разрешении как и сказал Сергей ZSA используйте @media

Answer 2

[Антон Федорян]

https://jsfiddle.net/slippyk/vzhrbny4/

Comments

[Ankhena]

Только повторяющиеся свойства убрать, их слишком уж много.

Answer 3

[Сергей ZSA]

Ну как бы всё в любом случае на flex ну а потом при нужном экране банально @media для этих двух. Почему так не сделать? Тут вроде ничего сложного.

Comments

[Денис Букреев]

те, кто пришел в верстку в последние два года, хотят чтоб все было просто и на автомате
они понятия не имеют что мы вытворяли в далеком 2007г, когда ie еще не поддерживал прозрачность .png)

[Сергей ZSA]

Денис Букреев: нет, веселей было, когда в тренде была табличная вёрстка. Вот тогда делались реально крутые вещи, а не то, что сегодня какая-то ерунда, которая автоматом работает везде и всюду, аж жить не интересно как-то