Question

我正在使用Bootstrap 3重新排序列并获得一些不需要的结果。我已尝试使用推/拉，添加包装器以及添加行但没有成功将它们放在所需位置。这是中型+屏幕上布局的样子：

    |A| B |
    | |C|D|

例如：http://www.bootply.com/A9wWGcPFCq

代码：

<div class="container" id="main">
    <div class="row">
        <div class="col-md-4 col-sm-6" id="red">A<br><br></div>
        <div class="col-md-8 col-sm-12" id="blue">B</div>
        <div class="col-md-4 col-sm-6" id="green">C</div>
        <div class="col-md-4 col-sm-6" id="yellow">D</div>
    </div>
</div>

以下是我希望它在小屏幕上显示的方式：

    |  B  |
    | A| C|
    |  | D|

例如：http://www.bootply.com/noUCrEWVtg

小屏幕上第一个链接中的代码会发生什么：

    | A|
    | A|
    |  B  |
    | C| D|

使用推/拉时在小屏幕上会发生什么：

       | A|
       |  |
    B  |
    | C| D|

（A被推向右侧，B被部分拉出容器左侧。）

单独使用Bootstrap 3可以实现所需的布局吗？怎么样？

Answer 1

Bootstrap中的推拉有时会很棘手。看一下这个link，它有很多关于推拉类使用的问题/解决方案。

Answer 2

这是我解决过的一个解决方案，它涉及拆分A列，重新处理对象的初始排序，然后使用推/拉将它们全部整理出来。如果有人找到更好的，请告诉我。如果我得到更好的东西，我会继续努力并发布。

<div class="container" id="main">
    <div class="row">
        <div class="col-md-8 col-md-push-4 col-sm-12" id="blue">B</div>
        <div class="col-md-4 col-md-pull-8 col-sm-6" id="red">A1</div>
        <div class="col-md-4 col-md-push-4 col-sm-6" id="green">C</div>
        <div class="col-md-4 col-md-push-4 col-sm-6 col-sm-push-6" id="yellow">D</div>
        <div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6" id="red">A2</div>
    </div>
</div>

还有一个链接：

http://www.bootply.com/vU3F0o4q5a

在Bootstrap 3

2 个答案: