引導3：推/拉列僅適用於小屏幕設備

Question

我有一個頁面上的以下佈局：在較小的屏幕尺寸，我想下面的佈局

<div class="col-sm-3 col-xs-6">1</div> 
<div class="col-sm-3 col-xs-6">2</div> 
<div class="col-sm-3 col-xs-6">3</div> 
<div class="col-sm-3 col-xs-6">4</div> 
<div class="col-sm-3 col-xs-6">5</div> 
<div class="col-sm-3 col-xs-6">6</div> 
<div class="col-sm-3 col-xs-6">7</div> 
<div class="col-sm-3 col-xs-6">8</div> 

--------- ----- ----- ----- - 
| 1 | 2 | 3 | 4 | 
------------------------------- 
| 5 | 6 | 7 | 8 | 

但是：

------- ----- --- 
| 1 | 2 | 
---------------- 
| 5 | 6 | 
---------------- 
| 3 | 4 | 
----------------- 
| 7 | 8 | 

我正在嘗試的是：

<div class="col-sm-3 col-xs-6">1</div> 
<div class="col-sm-3 col-xs-6">2</div> 
<div class="col-sm-3 col-xs-6 col-xs-push-6">3</div> 
<div class="col-sm-3 col-xs-6 col-xs-push-6">4</div> 
<div class="col-sm-3 col-xs-6 col-xs-pull-6">5</div> 
<div class="col-sm-3 col-xs-6 col-xs-pull-6">6</div> 
<div class="col-sm-3 col-xs-6">7</div> 
<div class="col-sm-3 col-xs-6">8</div> 

Answer 1

我認爲你使用3和6的網格，因爲你有其他項目仍然修復編輯。然後嘗試創建兩列並將列中的元素置於列中

<div class ="col-sm-3 col-xs-6"> 
    <div class="col-sm-12 col-xs-12">1</div> 
    <div class="col-sm-12 col-xs-12">2</div> 
    <div class="col-sm-12 col-xs-12">5</div> 
    <div class="col-sm-12 col-xs-12">6</div> 
</div> 
<div class ="col-sm-3 col-xs-6"> 
    <div class="col-sm-12 col-xs-12">3</div> 
    <div class="col-sm-12 col-xs-12">4</div> 
    <div class="col-sm-12 col-xs-12">7</div> 
    <div class="col-sm-12 col-xs-12">8</div> 
</div>