Swap divs links nach rechts auf mobiler Ansicht

Question

Ich mag die Kopfleiste mit drei Elementen haben will unter

Aber in der mobilen Ansicht i Menü will (Toggle-Symbol) nach links zu gehen und dem Logo sollte kommen Mitte. Ich habe versucht, zu drücken und zu ziehen. aber das funktioniert nicht für mich. Kann ich das irgendwie erreichen?

Hier ist mein Code. Zu Ihrer Information: Ich habe noch keine separate Medienabfrage hinzugefügt. Einfach die Bootstrap-Klassen verwenden.

<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

sollten Sie Medien Abfrage Stil CSS-Datei

.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; 
} 

hinzufügen können Sie am Leben Demo menu design

sehen