Существует множество способов добиться этого, но вам придется немного спланировать, прежде чем начать, чтобы узнать, какой маршрут вы хотите / нужно выбрать.
Задайте себе вопрос:
- Включают ли два разных навигационных решения один и тот же контент?
- Могут ли два разных навигационных решения включать одну и ту же иерархию кода?
Если ответ «нет»к любому из них я бы подошел с созданием двух разных html-компонентов и динамическим скрытием / отображением, в зависимости от размера области просмотра с помощью медиа-запросов.
Если ответ «да» на оба вопроса, скорее всего, у вас будеттщательно спланировать синтаксис вашей разметки, чтобы элементы навигации могли отображаться аналогично (хотя вам потребуется 100% использовать медиазапросы, чтобы изменить внешний вид обоих в зависимости от размера области просмотра).
Если у вас возникли проблемы с отображением их в разных областях (большие области просмотра вверху, меньшие области просмотра внизу), попробуйте utilizing position: absolute; и даже flexbox для изменения порядка отображения ваших элементов.