Есть вот такой лейаут:
Слева на широком мониторе, справа на мониторе поменьше. Верстка на флекс-боксе, переключение по медиа-запросу, понятное дело. Как именно перестроить блоки?
На поверхности лежит алгоритм: сменить режим флекса с row на column, включить wrap и всунуть зеленый блочок на вторую позицию при помощи свойства order. Ну и плюс еще немного покрутить отступы, но то уже второстепенные детали.
Но проблема в том, что высоты и всех трех блоков с картинки, и оборачивающего их контейнера - неизвестны. Высота должна определяться контентом (ширины в процентах от вьюпорта). А без фиксации высоты контейнера блоки не переносятся во вторую колонку, а просто выстраиваются в общий столбец.
Можно было бы решить вопрос справа, тупо обернув зеленый и оранжевый в промежуточный контейнер - но что тогда делать с левым?
Мне даже кажется, что я бы смог сделать это на флоатах, но флекс нужен по ряду других причин.
Гриды тоже не предлагать.
Простой
