在一个特定宽度内拉推柱

Question

:)

我有一个DIVB，它是-xs-6-md-推-5 col 7。天哪是-xs-6-拉-7 col 5。DIVB在代码中出现在DIVB之前，所以拉/推是有意义的。

它显示如下：

大的:a

介质:a

小:B

X-小:B

我想做X-小A，留下小的像B。我试了很多(推拉SM，XS)，但是我做不到.它总是破坏其他人中的一个。

有什么办法让我这样做吗？

Answer 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

Answer 2

如果您想保持DIVB DIVA的顺序，您必须为xs设置push/pull，为小尺寸重置push/pull，然后为md+大小重新设置push/ keep。

<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实例

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