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

Question

我正在为我的一个网站使用 bootstrap 3。我对 bootstrap 网格系统很满意，但是我找不到一种方法来做我想做的事情。我想要做的是：

为移动设备获取此布局

A
B
C
D
E

这个布局对于计算机来说应该变成这样（假设第一列是 .col-sm-8，第二列是 .col-sm-4）

A B
C E
D

Answer 1

一种交换列顺序的方法是使用类 .col-md-push-* 和 .col-md-pull-* ，如 bootstrap 文档中所引用：

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

这些应该允许您为指定的屏幕尺寸或更大的屏幕交换列的顺序（给出的示例指的是 'md' 或更大尺寸的屏幕）。因此，您需要选择您希望交换列的适当屏幕尺寸。

Answer 2

唉，bootstrap 做不到你想做的事，至少不是你尝试的方式。

与 and contrary to what even bootstraps official docs will make you believe 中的建议相反，.col-*-push-* 和 .col-*-pull-* 不会更改列的顺序，只是它们的水平位置，所以你不能使用这些类垂直移动一列。

幸运的是，您实际上可以做几件事，它们各有利弊：

将 div 的垂直位置更改为 CSS

这仅在您知道必须移动过去的元素的高度时才有效，在您的情况下 .d。如果这样做，请更改 css 以包含以下内容（根据需要调整高度）：

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

full example

将 div 的垂直位置更改为 jQuery

如果你不知道.d的高度，你可以用jQuery来确定它的高度，并相应地改变.es css：

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

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

您可以多次包含某些元素并添加适当的 bootstrap 类 .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

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

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

Is there a way to reorder bootstrap 3 columns vertically

twitter-bootstrap-3

将 div 的垂直位置更改为 CSS

将 div 的垂直位置更改为 jQuery

使用 jQuery

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