有没有办法垂直重新排序bootstrap 3列

Question

我在我的某个网站上使用bootstrap 3。我对bootstrap网格系统很满意，但我找不到一种方法来做我想做的事情。 我想做的是以下几点：

为移动设备获取此布局

A
B
C
D
E

这个布局对于计算机应该是这样的（让我们说第一列是.col-sm-8，第二列是.col-sm-4）

A B
C E
D

Answer 1

唉，你试图做的事情是不可能使用bootstrap，至少不是你尝试过的方式。

与another answer中的建议相反，与官方文档make you believe甚至引导相反，.col-*-push-*和.col-*-pull-* 不会更改列的顺序，只是它们的水平位置，因此您无法使用这些类垂直移动列。

幸运的是，你实际上可以做几件事，所有这些都有其优点和缺点：

使用CSS

更改div的垂直位置

只有在您知道要移动的元素的高度时，这才有效.d。如果您这样做，请更改您的CSS以包括以下内容（根据您的需要调整高度）：

.d {
    height:50px;
}
@media(min-width:768px) {
    .e {
        top:-50px;
    }
}

full example

使用jQuery

更改div的垂直位置

如果您不知道.d的高度，可以使用jQuery确定其高度并相应地更改.e sss：

if ($(window).innerWidth() >= 768) {
    $('.e').css('top', -$('.d').outerHeight());
}

full example

再次：这可以在没有jQuery的情况下使用纯JS实现。

使用jQuery重新排序元素

这里的关键是没有手动移动元素，但我们实际上会从DOM中删除一个元素并将其插入到不同的位置以实际更改元素的顺序：

if ($(window).innerWidth() >= 768) {
    $('.e').detach().insertAfter('.c');
}

full example

多次使用元素并根据视口大小显示它们

您可以多次包含一些元素并添加适当的引导类.hidden-xs和.visible-xs-block

<div class="container">
    <div class="row">
        <div class="col-sm-8 a">A</div>
        <div class="col-sm-4 b">B</div>
        <div class="col-sm-8 c">C</div>
        <div class="col-sm-4 e hidden-xs">E</div>
        <div class="col-sm-8 d">D</div>
        <div class="col-sm-4 e2 visible-xs-block">E</div>
    </div>
</div>

full example

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

Answer 2

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

http://getbootstrap.com/css/#grid-column-ordering

这些应该允许您交换指定屏幕尺寸或更大尺寸的列的顺序（给出的示例参考＆＃39; md＆＃39;或以上尺寸的屏幕）。因此，您需要选择适合您要交换列的屏幕大小。