Html Bootstrap 3：仅适用于较小屏幕设备的推/拉列

我在页面上有以下布局：

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

我尝试的是：

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

1
2.
3.
4.
5.
6.
7.
8.

我认为您使用网格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>

1.
2.
5.
6.
3.
4.
7.
8.

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