Как сделать адаптацию меню с помощью flex?

Question

[Анастасия]

Есть такой header:

https://codepen.io/anastasia_pat/pen/dyGRapb

Нужно чтобы при уменьшении экрана до 1080px в header остался только логотип, кнопка .dropdown-container button и div .header-collapse, а элементы находящиеся в .header-panel ul стали невидимыми и открывались как обычное выпадающее вертикальное меню при нажатии на .header-collapse.

Важно это сделать только с помощью flex и без дублирования кода

Помогите или подскажите пожалуйста)

Answer 1

[Арсений Матыцин]

Да, добавь order-ы и присыпь медиа-запросами.

Answer 2

[Добрый Человек]

Только медиа запросы помогут, вот посмотри один из моих проектов - кулинарный блог там это все реализовано