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

Question

我使用网格系统制作了一个简单的 bootstrap 页面。我有 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

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

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

并在媒体查询中以您想要的方式浮动它们。

或者您可以使用 bootstrap 预定义类：.pull-left 或 .pull-right iJay

的解决方案

Answer 2

我不确定是否有办法在纯 CSS 中做到这一点，但您可以使用库 enquire.js 来做到这一点。您可以挂钩产生单列布局的媒体查询并动态更改列的顺序。

例如：

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

Answer 3

推拉似乎使工作变得容易。这里是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>

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

Twitter Bootstrap 3 : Customize column stack order when viewed in Mobile screen

html

css

twitter-bootstrap

twitter-bootstrap-3