Responsive Header Positioning - html

Question

I developed a header using bootstrap 4.5
<nav class="navbar navbar-expand-sm navbar-light">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="logo.png">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Left -->
<ul class="navbar-nav left-menu mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item3</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto right-menu">
<li class="nav-item active">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
</div>
For the tablet I want to change the arrangement of the elements as follows :
I
I use media query :
#media (max-width: 991.98px) { ... }
But i dont know how can I transform left menu (mr-auto) to be bellow the menu.
Thank you !

Answer 1

What you're looking for is the bootstrap's class order-X where x is the order of the element.
With your current markup, you can add an order on mobile, then change it on desktop.
Note that you could change the markup to only change the order on desktop.
Step 1:
Define the order of the element
Logo will always have order-1
Left menu will have order-3 by default then order-md-2.
Right menu will always have order-2.
Step 2:
Define the width of Left menu
Width 100 by default col-12.
Width auto later on col-md-auto.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar">
<img src="//via.placeholder.com/150" class="order-1" alt="">
<ul class="navbar-nav left-menu mr-auto order-3 order-md-2 col-12 col-md-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item3</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto right-menu order-2">
<li class="nav-item active">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
</div>

Answer 2

use negative margin on right-menu in media queries.
#media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar {
flex-direction: column;
align-items: end;
}
.navbar-collapse, .left-menu {
width: 100%;
}
.right-menu {
margin-top: -80px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<!-- Left -->
<ul class="navbar-nav left-menu mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item3</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto right-menu">
<li class="nav-item active">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
</div>
</nav>

Answer 3

Create two "left menu".
Set "display:none" to the left menu near the logo when max width less than 991px and
set "display:block" to the second menu which is down to the logo.
Do the 2nd method in reverse to display the first menu and hide the second menu.
Use media query to do this responsive method.