Html TwitterBootstrap3：在移动屏幕中查看时自定义列堆栈顺序

我使用网格系统制作了一个简单的引导页面。我有三个栏目，内容分别是

Hello 1

、

Hello 2

和

Hello 3

。在桌面上查看时，所有3列都显示为相邻列。在移动屏幕中查看时，列会堆叠为顶部的

Hello 1

，然后是

Hello 2

，最后是

Hello 3

我想知道如何在顶部制作

Hello 3

，然后是

Hello 1

，最后是

Hello 2

。这是一本书

下面是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>

小组标题
你好1
小组标题
你好2
小组标题
你好3

---

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

当您在较小的屏幕上查看所有列时，所有列都会向左浮动，因此您可以向每个列添加不同的类，例如 .左沟 .对

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

---

或者您可以使用引导预定义类：.pull left或.pull rightiJay解决方案

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

当您在较小的屏幕上查看所有列时，所有列都会向左浮动，因此您可以向每个列添加不同的类，例如 .左沟 .对

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

---

或者您可以使用引导预定义类：.pull left或.pull rightiJay的解决方案

我不确定是否有一种方法可以在纯CSS中实现这一点，但您可以使用库来实现。您可以钩住生成单列布局的媒体查询，并动态更改列的顺序

例如：

---

我不确定是否有一种方法可以在纯CSS中实现这一点，但可以使用库来实现。您可以钩住生成单列布局的媒体查询，并动态更改列的顺序

例如：

---

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

小组标题
你好3
小组标题
你好1
小组标题
你好2

---

似乎推挽可以让工作变得轻松。这里是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>

小组标题
你好3
小组标题
你好1
小组标题
你好2

---

谢谢，但我刚刚想出了一种使用推拉的方法。这正是我的意思，使用float类。：-）但是，如果你再次使用推拉，你的div将与大屏幕上的布局相同。因此，如果你想要相同的div布局，那么为什么需要推拉？它的布局不同。。。。不一样。在浏览器中查看此项，然后查看移动视图。堆栈顺序不同，正如我所希望的那样！好的，我将编辑我的答案，以便其他人可以从中受益。谢谢，但我刚刚想出了一种使用推拉的方法。这正是我的意思，使用float类。：-）但是，如果你再次使用推拉，你的div将与大屏幕上的布局相同。因此，如果你想要相同的div布局，那么为什么需要推拉？它的布局不同。。。。不一样。在浏览器中查看此项，然后查看移动视图。堆栈顺序不同，正如我所希望的那样！好的，我将编辑我的答案，这样其他人可以从中受益。谢谢，但我刚刚想出了一种使用推拉的方法。太棒了，我不知道这些课程+谢谢你的回答。但我刚刚想出了一个使用推拉的方法。太棒了，我不知道那些课程+我对你的答案有信心。