Question

我正在使用bootstrap创建一个响应式网站。我必须在左侧第一列<div class="col-md-4 column">，在右侧第一列是<div class="col-md-8 column">。

当我在sm或xs上看到它时，每个网格都会变为12列，这很好。

我希望RIGHT列首先出现在LEFT列中。

这就是我所拥有的，这是行不通的。

<div class="col-md-4 column col-sm-push-12 col-xs-push-12">
<div class="col-md-8 column col-sm-pull-12 col-xs-pull-12">

Answer 1

看看这里：http://www.bootply.com/qlstG12Aea

<div class="container">
    <div class="row">
        <div id="r-column" class="col-xs-12 col-sm-12 col-md-push-4 col-md-8">right</div>
        <div id="main" class="col-xs-12 col-sm-12 col-md-pull-8 col-md-4">main</div>
    </div>
</div>

反过来做。首先声明移动设备，xs和sm全宽，然后设置md - 设备会将其拉到正确的顺序。

Answer 2

诀窍是改变html中列的顺序：

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

所以，你真的会改变LG和MD的顺序，SM和XS将显示你的html代码的实际顺序。

工作示例：http://jsfiddle.net/cj4vqxv5/

Bootstrap推拉两个网格

2 个答案: