Question

我使用网格系统制作了一个简单的引导页面。我有3列包含内容Hello 1，Hello 2和Hello 3。在桌面中查看时，所有3都显示为相邻列。在移动设备屏幕中查看时，列会在Hello 1位于顶部，然后是Hello 2，最后是Hello 3。

我想知道如何将Hello 3置于最前面，然后Hello 1，最后Hello 2。这是DEMO。

这是HTML代码：

<div class="container">
<div class="row">
    <div class="col-md-4">
            <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Hello 1
            </div>
            </div>
    </div>
    <div class="col-md-4">
             <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Hello 2
            </div>
            </div>
    </div>
    <div class="col-md-4">
             <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Hello 3
            </div>
            </div>
    </div>
</div>

Answer 1

似乎推拉使得工作变得轻松。这是DEMO这是HTML

<div class="container">
<div class="row">
     <div class="col-sm-4 col-sm-push-8">
             <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Hello 3
            </div>
            </div>
    </div>
    <div class="col-sm-4 col-sm-pull-4">
            <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Hello 1
            </div>
            </div>
    </div>
    <div class="col-sm-4 col-sm-pull-4">
             <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Hello 2
            </div>
            </div>
    </div>

</div>

Answer 2

那就是bootstrap网格系统的工作方式。没有任何直接的方法，但你可以做的是创建媒体查询。

当您在较小的屏幕中查看它们时，所有列都会浮动，因此您可以为每个列添加不同的类 .left_col .right_col

在媒体查询中，按照您想要的方式浮动它们。

或者您可以使用自助预定义类：.pull-left或.pull-right 解决方案iJay

Answer 3

我不确定是否有办法在纯CSS中执行此操作，但您可以使用库enquire.js来执行此操作。您可以挂钩生成单列布局的媒体查询，并动态更改列的顺序。

E.g：

enquire.register("screen and (min-width: your-target-width)", {
    match : function() {
        // sort by 3, 1, 2
    },  
    unmatch : function() {
        // sort by 1, 2, 3
    }
});

Twitter Bootstrap 3：在Mobile屏幕中查看时自定义列堆栈顺序

3 个答案: