引導 - 將整排的頂部

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

您需要更改您的HTML元素的順序，使您的col-*-12是第一次。然後你可以使用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您想要的佈局元素的順序。