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