更改移动设备的行顺序答案

【问题标题】：Change row order for mobile devices更改移动设备的行顺序
【发布时间】：2015-06-24 05:19:34
【问题描述】：

我已经看到了几个示例，说明如何使用 col-*-push-12 在引导程序中堆叠列顺序，但是您可以对具有类 container-fluid 的 div 执行此操作吗？

我有以下 HTML：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mydiv1">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-12">
            ...
            </div>
            <div class="col-md-6 col-sm-12">
            ...
            </div>
        </div>
    </div>
</div>
    
<div class="container-fluid mydiv2">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
            ...
            </div>
            <div class="col-md-8">
            ...
            </div>
        </div>
    </div>
</div>

如何在小型设备中使用推送类来反转堆栈顺序（将 mydiv2 上移和 mydiv1 下移）？

【问题讨论】：

为什么会有多个嵌套容器？根据我的经验，一个通常就足够了。然后使用行和列对内容进行结构化和排序，必要时嵌套它们。例如，您的结构可能简化为：jsfiddle.net/isherwood/w54fphvy
啊..你明白了。如果我能设法将我的 cols 包含在一个容器中，我就能达到我想要的结果。谢谢。将测试并发布我的结果。
@isherwood 这是我再次面临的问题。我需要两次包含容器流体，因为它们都包含我想要填充屏幕的不同背景颜色。我不可能将 bg color css 规则包含在 cols 中，因为它们嵌套在位于中心的宽度为 1170px 的容器下。您能想到的任何解决方法？
哎呀。那里弄错了。 jsfiddle.net/isherwood/ycdcko60
行，如果使用得当，填满屏幕宽度：jsfiddle.net/isherwood/ycdcko60/1

标签： jquery html css twitter-bootstrap

【解决方案1】：

当然，Bootstrap push、pull 类在 container-fluid.. 中工作。

<div class="container-fluid mydiv1">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-push-6 col-sm-12">
            1
            </div>
            <div class="col-md-6 col-md-pull-6 col-sm-12">
            2
            </div>
        </div>
    </div>
</div>

<div class="container-fluid mydiv2">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">
            1
            </div>
            <div class="col-md-8 col-md-pull-4">
            2
            </div>
        </div>
    </div>
</div>

Demo on Codeply

【讨论】：

可能我之前没有说清楚。我想要的是上下移动整个父 div。
究竟什么元素是“父 div”？
我认为她的意思是“mydiv1”、“mydiv2”容器。