Twitter bootstrap 引导3在网格中的行之间移动项目

我正试图让我的布局在行与行之间移动项目，网格系统正在做我的头与此

在中等及以上，我希望它看起来像这样

+---+-------+
| A |   B   |
|   |-------+
|   | C | D |
+---+---+---+

+-------+
|   C   |
+-------+
|   B   |
+-------+
| A | D |
+---+---+

然后以较小的分辨率，我希望它像这样

+---+-------+
| A |   B   |
|   |-------+
|   | C | D |
+---+---+---+

+-------+
|   C   |
+-------+
|   B   |
+-------+
| A | D |
+---+---+

---

我一直在尝试使用一些嵌套行，但我一直无法理解它们如何根据不同的大小（sm、md等）进行移动。

您也可以使用隐藏和可见类。 看看getbootstrap.com上的

因此，您可以想象在HTML文件中按需组织内容，如下所示：

.cola{背景：红色；高度：100px；}
.colb{背景：灰色；高度：100px；}
.colc{背景：绿色；高度：100px；}
.cold{背景：黄色；高度：100px；}

科拉
B列
C柱
D列
C柱
B列
科拉
D列

第一个技巧是始终首先使用最小视图。有些布局使用推拉类。如果你需要将一根柱子水平推到另一个位置，那么它就可以工作了。你的布局不能通过引导中的css来实现，你可以通过Flexbox在css中实现，并为传统浏览器或使用jQuery创建回退。我一直在寻找不需要多次加载内容的东西。然而，这有点帮助。