以一种特定的宽度拉动和推动立柱答案

【问题标题】：Pulling and pushing columns in one specific width以一种特定的宽度拉动和推动立柱
【发布时间】：2016-05-07 02:54:10
【问题描述】：

我有一个 DIV[B]，它是 col-xs-6 col-md-push-5 col-md-7。 DIV[A] 是 col-xs-6 col-md-pull-7 col-md-5。 DIV[B] 在代码中位于 DIV[A] 之前，因此拉/推是有意义的。

显示如下：

大：[A][B]

中等：[A][B]

小：[B][A]

X-Small：[B][A]

我想制作 X-SMall [A][B]，只留下 [B][A] 的小。我尝试了很多（推拉 SM、XS）但我就是做不到……它总是会破坏其他的一个。

我有办法做到这一点吗？ :)

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

当然，先做 A，然后使用 pull-0 或 push-0 类。

<div class="row">
    <div class="col-xs-6 col-sm-push-7 col-sm-5 col-lg-push-0 col-md-push-0">A</div>
    <div class="col-xs-6 col-sm-pull-5 col-sm-7 col-lg-pull-0 col-md-pull-0">B</div>
</div>

http://codeply.com/go/wraA182sM2

【讨论】：

太棒了。非常感谢。 :))))

【解决方案2】：

如果你想保持 DIV[B] DIV[A] 的顺序，你必须为 xs 设置推/拉，为小尺寸重新设置推/拉，然后再次设置推/拉md+ 大小。

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-push-6 col-sm-push-0 col-md-push-5">
            <p>Col B</p>
        </div>
        <div class="col-xs-6 col-xs-pull-6 col-sm-pull-0 col-md-pull-7">
            <p>Col A</p>
        </div>
    </div>
</div>

这是CodePen example

顺便说一句，@Skelly 的答案中的col-lg-push-0 是不必要的。 col-md-push-0 适用于 lg 大小。

【讨论】：