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

Question

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

为移动设备获取此布局

A
B
C
D
E

对于计算机，这种布局应该是这样的（假设第一列是.col-sm-8，第二列是.col-sm-4）

A B
C E
D

Answer 1

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

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

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

Answer 2

唉，你试图做的事情是不可能用引导程序做的，至少不是你尝试的方式。

与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来确定它的高度并相应地改变.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

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

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

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