Есть ли способ реализовать перенос блока во флекс-боксе под соседний флекс-бокс?

Question

[zwezew]

jsfiddle.net

В чем суть - реально ли сделать верстку так, чтобы при сужении экрана серый блок с link переносился под красный с зеленым блоки (в одну линию) и растягивался во всю ширину? Т.е. чтобы визуально стало две строки, в верхней красный и зеленый блоки, под ними серый.

UPD: сделал реализацию с помощью float
Корректен ли этот вариант и есть ли возможность сделать аналогично работающий вариант на флексах?

Answer 1

[Алексей Бульба]

Эм. Просто у класса wrap сделать flex-direction: column;

Comments

[zwezew]

Тогда блоки встают в три строки

https://jsfiddle.net/c4owt276/23/

А нужно две строки, в верхней красный и зеленый блоки, под ними серый

[Алексей Бульба]

zwezew, не правильно читал, тогда так https://jsfiddle.net/c4owt276/24/ :)

[zwezew]

Алексей Бульба, одна проблема - этот вариант должен включаться при сужении окна, я так и не придумал, как это сделать)
Т.е. чтобы вариант из стартового сообщения при сужении становился таким, как ваш.

С флоатами получилось что-то вроде нужного. но там свои проблемы, с высотой например, и нельзя использовать order, а он нужен.

[Алексей Бульба]

zwezew, тут уже игры с flex-wrap и длиной элементов, либо медиа выражение использовать

Answer 2

[zoozag]

https://jsfiddle.net/qg2spb2m/
Так?

Comments

[zwezew]

Сделал вариант с float, вот по аналогии пытаюсь реализовать вариант с флексами.