レイアウトでブートストラップをプル＆プッシュ作成する混乱

Question

私はTwitterのブートストラップを使用しており、列の順序でスタックしています。

これは、mdとlgの画面サイズ：Logo | Buttons | Menuのレイアウトです。

これは私が達成したいレイアウトです：Logo | Menu | Buttons（ボタンを押してメニューを引っ張ってください）。ここで

は、私は厄介なレイアウトを使用して取得していたコードです：

素敵な列の順序を達成するために、適切Twitterのブートストラップにプルとプッシュを使用する方法

<div class="row main-menu-row"> 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 logo"> 
     <img class="logo-img" src="img/logo.png" /> 
    </div> 
    <div class="col-lg-push-3 col-md-2 col-sm-9 button-menu"> 
     <div class="btn-group btn-group-justified numbutgr"> 
     <a href="#" class="btn addnumbut"><span class="glyphicon glyphicon-earphone"></span></a> 
     <a href="#" class="btn seanumbut"><span class="glyphicon glyphicon-search seanumico"></span></a> 
     </div> 
    </div> 
    <div class="col-lg-pull-6 col-md-7 col-sm-12 col-xs-9 menu-links"> 
     <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <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="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Главная <span class="sr-only">(current)</span></a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-book"></span>Каталог</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-bullhorn"></span>Блог</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>О нас</a></li> 
       <li><a href="#"><span class="glyphicon glyphicon-phone-alt"></span>Контакты</a></li> 
      </ul> 
      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
     </nav> 
    </div> 
    </div> 

？

Answer 1

プッシュ、プル、およびカラーの幅を調整します。 1つの層にpushまたはpullを使用する場合は、他の層にも指定する必要があります。

<div class="row main-menu-row"> 
     <div class="col-lg-3 col-md-3 col-sm-3 logo"> 
      <img class="logo-img" src="//placehold.it/150x30"> 
     </div> 
     <div class="col-lg-push-6 col-lg-3 col-md-2 col-md-push-7 col-sm-9 col-sm-push-0 button-menu"> 
      buttons 
     </div> 
     <div class="col-lg-pull-3 col-lg-6 col-md-7 col-md-pull-2 col-sm-12 col-sm-pull-0 menu-links"> 
      menu 
     </div> 
    </div> 

http://www.codeply.com/go/FdmE6lyyhT