Twitter bootstrap 3 有没有办法对引导3列进行垂直重新排序

我正在为我的一个网站使用Bootstrap3。我对引导网格系统非常满意，但是我找不到一个方法来做我想做的事情。 我想做的是：

为移动设备获取此布局

A
B
C
D
E

对于计算机来说，这种布局应该是这样的（假设第一列是

.col-sm-8

，第二列是

.col-sm-4

）

---

交换列顺序的方法是使用引导文档中引用的.col md push-*和.col md pull-*类：

---

这些应该允许您将列的顺序交换为指定的屏幕大小或更大的屏幕（给出的示例指的是“md”或更大的屏幕）。因此，您需要选择适当的屏幕大小，以便对列进行交换。

唉，您所尝试的操作在引导中是不可能的，至少不是您尝试的方式

与中的建议相反，甚至与bootstraps官方文档的建议相反，

.col-*-push-*

和

.col-*-pull-*

不会改变列的顺序，只会改变它们的水平位置，因此不能使用这些类垂直移动列

幸运的是，您实际上可以做几件事，它们都有各自的优点和缺点：

使用CSS更改div的垂直位置 这只有在您知道必须移动过去的元素的高度时才有效，在您的情况下是

.d

。如果需要，请更改css以包含以下内容（根据需要调整高度）：

.d{
高度：50px；
}
@介质（最小宽度：768px）{
e{
顶部：-50px；
}
}

使用jQuery更改div的垂直位置 如果您不知道

.d

的高度，可以使用jQuery确定其高度，并相应地更改

.e

的css：

if（$（窗口）.innerWidth（）>=768）{
$（'.e'）.css（'top'，-$（'.d'）.outerHeight（））；
}

同样：这可以在没有jQuery的情况下使用纯JS实现

使用jQuery对元素重新排序 这里的关键是不需要手动移动元素，但实际上我们将从DOM中删除一个元素，并将其插入到不同的位置，以实际更改元素的顺序：

if（$（窗口）.innerWidth（）>=768）{
$（'.e'）.detach（）.insertAfter（'.c'）；
}

多次使用元素并根据视口大小显示它们 您可以多次包含某些元素并添加适当的引导类

。隐藏的xs

和

。可见的xs块

A.
B
C
E
D
E

---

就可访问性或搜索引擎优化而言，这可能不是最好的解决方案，但如果您的内容是静态的，并且您只对屏幕上的外观感兴趣，那么这是最简单的方法。

既然您提到了正确的类，我想您已经对此进行了一些思考和工作。你能包括你已经有的任何代码吗？比你的答案。是的，我已经找了几个小时的解决方案了。实际上，我可以独立地实现这两个布局，但是我不能得到一个封装这两个布局的布局。到目前为止，我掌握的代码是这样的。我遇到的问题是，用于计算机布局的列E位于右侧，但在D级别，我希望它刚好位于B之下。在您发布代码后，我能够确定问题所在。我更改了你问题的标题，让它更清楚，实际问题是什么，我希望你能接受。谢谢你的回答。事实上，我已经尝试使用这些，但它不适合我。。。为什么？因为移动设备的列顺序是固定的，所以这正是我想要的顺序。如果说我在A之前有B作为移动布局，那么我会使用col sm push。。。要将B列置于右侧，并应用col sm pull。。。好的，非常感谢@mmgross的完整解释。实际上我曾经考虑过上一个解决方案，但我不能重复元素，因为SEO非常重要。我将选择第三个，使用jquery对元素进行重新排序，这更适合我的需要。所有的解决方案都是有用的，并且每一个都可能对不同的环境有用。再次感谢。这是另一个可用选项：flexbox。看到这个答案了吗

A B
C E
D