如何重新排列Boostrap cols橫跨兩行並且僅用於col-sm？

Question

我在使用Bootstrap 3排序列時遇到了問題。我有四個按字母順序排列的表單字段。目前，他們正確地顯示在XS（COL-XS-12）堆疊在彼此的頂部上的4周的div一個柱：

1 a 
2 ↓ 
3 ↓ 
4 z 

在MD和LG，我有它們作爲連續4周的div（COL -MD-3），這也偉大工程：

1 2 3 4 
a e k s 
↓ ↓ ↓ ↓ 
d j r z 

問題就出現了與SM，我想有兩列（COL-SM-6）彼此相鄰。在這種情況下，我想交換第二個和第三個div。目前，我得到這個：

1 2  a→j 

3 4  k→z 

但我想獲得這樣的：

1 3  a k 
      ↓ ↓ 
2 4  j z 

我想這樣做交換的原因是爲了保持字母順序從上到下在一列中，然後在第二個從上到下。

我嘗試過使用推/拉無效 - 它似乎不工作推擠到另一條線或拉起來...我也讀this StackOverflow question其中建議的答案是嵌套列 - 但我不確定我在這裏如何使用它，因爲在xs視圖中，我希望所有的div都可以相互重疊。這個問題的另一個答覆者提議使用隱藏/可見，最初我認爲它可以工作，但是，由於這些是表單域，我不希望有重複的域，其中用戶已經回答的問題可能會在屏幕調整大小時消失，取代與現在看起來相同的領域是未回答...

我有一個漂亮的圖片準備說明我的問題，但是一個新用戶，所以無法發佈它 - 我希望我能夠讓自己清楚。此外，如果此問題已在其他地方得到解答，我錯過了，請告訴我。預先感謝您的任何見解和/或建議！

Answer 1

我覺得嵌套是最好的辦法..

<div class="row"> 
     <div class="col-sm-6"> 
      <div class="row"> 
       <div class="col-md-6 col-sm-12"> 
       1 
       </div> 
       <div class="col-md-6 col-sm-12"> 
       2 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <div class="row"> 
       <div class="col-md-6 col-sm-12"> 
       3 
       </div> 
       <div class="col-md-6 col-sm-12"> 
       4 
       </div> 
      </div> 
     </div> 
    </div> 

http://codeply.com/go/lAPR06iMI5

Answer 2

查看該文章Reorder CSS Columns Using Bootstrap作者：Chris Sevilleja。

我認爲這就是你要找的。

<div class="container text-center"> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3">1</div> 
    <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-3">2</div> 
    <div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-3">3</div> 
    <div class="col-xs-12 col-sm-6 col-md-3">4</div> 
</div>