2016-04-03 21 views
0

ブートストラップのsmとxsの列の順序に問題があります。私は "3" から "1"、 "3"、 "1" から注文 "2" に変更したいのですが、 "2" SMおよびxs決議に:ブートストラップ - 列の表示順序を変更する方法

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

私が設定してみましたcol-xs-push-12を2に、col-xs-push-12を3に設定しても動作しません。私を助けてください。ここで

が私のファイルです: http://www.speedyshare.com/6B6Fv/public-html.rar

やコード:

 <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> 

答えて

0

はそう

<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"> 
    ... 

フィドルのように、高い画面サイズのプル/プッシュを使用してください - https://jsfiddle.net/73jpt545/

+0

それは動作します。どうもありがとうございます! – Decol

関連する問題