Twitter bootstrap 我怎样才能在两行之间重新排列Boostrap col，并且只针对col sm？

我在使用bootstrap3排序列时遇到问题。我有四个按字母顺序排列的表单字段div。目前，它们在xs（col-xs-12）中正确显示为四个DIV的一列，每个DIV堆叠在一起：

1 a
2 ↓
3 ↓
4 z

在md和lg中，我将它们作为四个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

但我想得到这个：

1   2     a→j

3   4     k→z

1   3     a   k
          ↓   ↓
2   4     j   z

我之所以要进行这种交换，是为了保持字母顺序在一列中从上到下，然后在第二列中从上到下

我尝试过使用推/拉都没有用-似乎把东西推到另一条线上或拉上去都不起作用。。。我还阅读了建议的答案是嵌套列的位置——但我不确定如何使用它，因为在xs视图中，我希望所有div都位于彼此之上。另一位对此问题的回答者建议使用隐藏/可见，我最初认为这可能会起作用，但由于这些是表单字段，我不希望有重复字段，用户已经回答的问题可能会在调整屏幕大小时消失，将被替换为他们现在似乎无法回答的相同字段

我准备了一张漂亮的图片来说明我的问题，但我是一个新用户，所以无法发布它-我希望我能把自己说清楚。另外，如果这个问题已经在其他地方得到了回答，而我错过了，请告诉我。提前感谢您提供的任何见解和/或建议

查看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>

1.
2.
3.
4.

---

我认为嵌套是最好的方法

<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>

1.
2.
3.
4.

---

谢谢你，@Skelly-非常有帮助！