Bootstrap - wie Reihenfolge der Anzeige von Spalten ändern

Question

Ich habe Probleme mit der Bestellung von Spalten auf sm und xs groß auf Bootstrap. Ich würde gerne von "1" ändern, Bestellung, "2", "3" auf "1", "3", "2" auf sm und xs Auflösungen:

http://imageshack.com/a/img923/8600/DF8LGA.png

Ich habe versucht zu setzen col-xs-push-12 zu "2" Spalte und col-xs-push-12 zu "3" Spalte, aber es funktioniert nicht. Bitte hilf mir.

Hier sind meine Dateien: http://www.speedyshare.com/6B6Fv/public-html.rar

und Code:

 <div class="header-bot"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-2"> 
        <a class="logo-1 hidden-sm hidden-xs" href="index.html"> 
         <img src="img/logo-md.png" alt="Logo"/> 
        </a> 
        <a class="visible-sm" href="index.html"> 
         <img src="img/logo-sm.png" alt="Logo"/> 
        </a> 
        <a class="visible-xs" href="index.html"> 
         <img src="img/logo-xs.png" alt="Logo"/> 
        </a> 
       </div> 
       <div class="col-md-7 col-sm-12 col-xs-push-12"> 
        <nav class="navbar navbar-default"> 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="hidden-xs icon-bar"></span> 
          <span class="hidden-xs icon-bar"></span> 
          <span class="hidden-xs icon-bar"></span> 
          <span class="visible-xs glyphicon glyphicon-menu-hamburger"></span> 
          </button> 
          <p class="hidden-lg hidden-md">Menu</p> 
         </div> 
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
          <ul class="ul-main nav navbar-nav navbar-right"> 
           <li><a href="#">new</a></li> 
           <li><a href="#">designers</a></li> 
           <li><a href="#">women</a></li> 
           <li><a href="#">men</a></li> 
           <li><a href="#">clearence</a></li> 
          </ul> 
         </div> 
        </nav> 
       </div> 
       <div class="header-user col-md-3 col-sm-4 col-xs-pull-12"> 
        <div class="cart hidden-xs"> 
         <p>Your cart</p> 
        </div> 
        <div class="basket"> 
         <p>0 Items | $ 0</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Verwenden Sie die Zug-/Schub auf der höheren Bildschirmgröße, wie so

<div class="header-user col-sm-4 col-md-3 col-md-push-7"> 
    ... 

<div class="col-sm-12 col-md-7 col-md-pull-3"> 
    ... 

---

Fiddle - https://jsfiddle.net/73jpt545/