swap divs left right on mobile view - html

Question

I want to have the header bar with three elements like below
But in mobile view i want menu(toggle-icon) to go left and logo should come middle. I tried push and pull. but that doesn't work for me. Is there anyway i can achieve this?
Here is my code. FYI, I did not add any separate media query yet. Just using the bootstrap classes.
<div class="row d-flex flex-nowrap" style="background-color: #2B3536;">
<div class="col-lg-1 col-md-1 col-sm-2 col-2 align-self-center"><img src="https://dummyimage.com/127x50/2b3536/fff"></div>
<div class="col-lg-8 col-md-9 col-sm-8 col-8 order-sm-first">
<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-expand-sm">
<div class="container d-flex flex-row flex-md-nowrap flex-wrap">
<a href="#" class="hidden-md-up mr-3" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false">
<i class="fa fa-bars fa-lg text-white"></i>
</a>
<!--<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>-->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav header-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>-->
</ul>
</div>
</div>
</nav>
</div>
<div class="col-lg-3 col-md-2 col-sm-2 col-2 align-self-center">
<div class="input-group">
<input class="form-control hidden-md-down"
placeholder="I'm looking for">
<div class="input-group-addon top-search-addon"><i class="fa fa-search fa-search-white"></i></div>
</div>
</div>
</div>

Answer 1

you should add media query to style css file
.navbar-brand{
padding-top:8px;
}
.navbar-brand img{
height:35px;
width:35px
}
#media (max-width:767px) {
.navbar-brand{
position: absolute;
left: 40%;
}
}
.navbar-toggle {
float: left;
}
you can view alive demo menu design