有没有办法垂直重新排序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是不可能的,至少不是你尝试过的方式.

与另一个答案所建议的相反,甚至与官方文档会让你相信的内容相反,.col-*-push-*并且.col-*-pull-* 不会改变列的顺序,只是它们的水平位置,所以你不能使用这些类垂直移动列.

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

使用CSS更改div的垂直位置

这只适用于您的情况,如果您知道要移动的元素的高度.d.如果您这样做,请更改您的CSS以包括以下内容(根据您的需要调整高度):

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

完整的例子

使用jQuery更改div的垂直位置

如果您不知道高度.d,可以使用jQuery来确定其高度并相应地更改.es css:

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

完整的例子

再说一次:这可以在没有jQuery的情况下使用纯JS实现.

使用jQuery重新排序元素

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

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

完整的例子

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

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

完整的例子

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