Интересно, можно ли изменить порядок отображения навигационных элементов, когда две навигационные панели сворачиваются в одну кнопку на планшете или мобильном устройстве?
Я использую Bootstrap 4 для кодирования.
IДля справки использовали код из ссылки StackOverflow. Bootstrap 4.0 - два навигационных бара, которые сворачиваются в один переключатель
<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"></head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup, #navbarNavAltMarkup1" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home1 <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features1</a>
<a class="nav-item nav-link" href="#">Pricing1</a>
<a class="nav-item nav-link disabled" href="#">Disabled1</a>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup1">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home2</a>
<a class="nav-item nav-link" href="#">Features2</a>
<a class="nav-item nav-link" href="#">Pricing2</a>
<a class="nav-item nav-link disabled" href="#">Disabled2</a>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
Мой текущий вывод выглядит примерно так на рабочем столе (как я хочу, чтобы он отображался)
Navbar Home1 Особенности1 Цены1 Отключено1 Дом2 Особенности2 Цены2 Отключено2
Но в режиме просмотра «Мобильный телефон / планшет», когда сворачивается панель навигации, отображается что-то вроде следующего.
Навбар (кнопка «Гамбургер») Home1 Особенности1 Цены1 Отключено1 Дом2 Функции2 Ценообразование2 Отключено2
Как я могуизмените мой код, чтобы он отображался, как показано ниже, когда он свернут:
Навбар (кнопка гамбургера) Дом2 Особенности2 Цены2 Отключено2 Дом1 Особенности1 Цены1 Отключено1
В мобильном представлении я хочу, чтобы оно отображало содержимое идентификатора= "navbarNavAltMarkup1" first и id = "navbarNavAltMarkup" last при нажатии кнопки переключения, но в представлении рабочего стола я хочу, чтобы он оставался таким, какой он есть (без изменений).