ブートストラップ -

Question

これは私のlgレイアウトでトップに行全体をプッシュ：

------------------------------------------------ 
|  3(xs4)| 3(xs4)| 3(xs4)| 3(12xs) | 
------------------------------------------------ 

これは私のxsレイアウトです：これまでのところ（プッシュとプルなし）

------------------------------------------------ 
|  4   |  4  |  4  | 
------------------------------------------------ 
|     12       | 
------------------------------------------------ 

私のhtml：

を

  <div class="row"> 
          <div class="col-lg-3 col-sm-3 col-xs-4 text-center"> 

          </div> 
          <div class="col-lg-3 col-sm-3 col-xs-4 text-center"> 

          </div> 
          <div class="col-lg-3 col-sm-3 col-xs-4 text-center"> 

          </div> 
          <div class="col-lg-3 col-sm-3 col-xs-12 text-left"> 


          </div> 

         </div 

必要なもの：

lgレイアウトの最後の列は、xsレイアウトの先頭になければなりません。 pushとpullを使用すると、行内の位置のみを変更できます。列が自動的に次/前の行にジャンプしていません。

私の希望する結果：

------------------------------------------------ 
|     12       | 
------------------------------------------------ 
|  4   |  4  |  4  | 
------------------------------------------------ 

Answer 1

あなたのcol-*-12が最初になるように、HTMLでの要素の順序を変更する必要があります。あなたはpushとpullをご希望のレイアウトを達成することはできません要素の順序を変更することなく、

/* For demo only... */ 
 
[class*="col-"] { 
 
    outline: 1px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
    <div class="col-lg-3 col-sm-3 col-xs-12 col-sm-push-9 text-left"> 
 
    12 
 
    </div> 
 
    <div class="col-lg-3 col-sm-3 col-xs-4 col-sm-pull-3 text-center"> 
 
    4 
 
    </div> 
 
    <div class="col-lg-3 col-sm-3 col-xs-4 col-sm-pull-3 text-center"> 
 
    4 
 
    </div> 
 
    <div class="col-lg-3 col-sm-3 col-xs-4 col-sm-pull-3 text-center"> 
 
    4 
 
    </div> 
 
</div>

：次に、あなたはこのようpushとpullを使用することができます。