Как правильно показывать колонки flexbox вне родительского ряда?

Question

[Михаил Р.]

Приветствую!

Пример

Предположим, имеется шапка в виде display: flex, в ней колонки с разным контентом. Внимание на колонку с кнопками:
1. При разрешение => 992px - показываем кнопки в колонке contacts_2.
2. При разрешение < 992px - показываем кнопки в отдельной последней колонке.

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

В примере я реализовал это дублированием колонок, одна показывается, когда вторая скрыта и наоборот. Насколько это правильно?

P.S. про display: grid - знаю, вопрос стоит именно про flex.

Comments

[Lord_Dantes]

Цвета имеют значение? Я не понимаю какой нужен результат)

[Михаил Р.]

Lord_Dantes, нет, цвета для примера, чтобы было понятно, где какая колонка.

Answer 1

[maralov]

Во флексах вы не можете из одно контейнера переместить элементы в другой контейнер
В ваше примере нужно или переделать структуру или гриды или JS выдергивать кнопки и помещать их в другой контейнер (https://habr.com/ru/post/502028/) или оставить как есть дублировать в хедере кнопки в целом допустимо

Answer 2

[Eugen]

Flex order