Bootstrap：按顺序折叠列？

Question

我正在创建一个可在桌面和移动设备上运行的自举响应式应用。我正努力让我的一个页面按两种格式显示。我希望它看起来像下面的图表，但是会折叠成单个列，其中的单元格按数字顺序排列（1,2,3,4）。

+------------+ +---------------+
|            | |               |
|            | |               |
|            | |       2       |
|            | |               |
|      1     | |               |
|            | +---------------+
|            | +---------------+
|            | |               |
+------------+ |       4       |
+------------+ |               |
|            | +---------------+
|      3     | 
|            | 
+------------+ 

现在，它看起来如下图所示：

+------------+ +---------------+
|            | |               |
|            | |               |
|            | |       2       |
|            | |               |
|      1     | |               |
|            | +---------------+
|            |
|            |
+------------+
+------------+ +---------------+
|            | |               |
|      3     | |       4       |
|            | |               |
+------------+ +---------------+

可以使用此代码实现：

  <div id="firstrow" class="row">
    <div class="col-sm-8">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
  </div> <%# End firstrow %>

  <div class="row">
    <div class="col-sm-8">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
  </div> <%# End secondrow %>

如果我只使用两列，我可以正确获得桌面格式，但是它不会按照我想要的顺序崩溃（将是1,3,2,4）。我想删除＆＃34;行＆＃34; div可能会有所帮助，但这似乎会产生完全相同的桌面格式结果。

关于如何使用bootstrap（首选）或自定义CSS？

的任何想法

干杯，

-Hamish