Question

我试图在中间（向上）分辨率中反转2列。

以下是我在 bootply 上的代码，您也可以在此处看到：

＆＃13;

<div class="container">
  <div style="border:1px solid red;">
    <div class="row">
      <div class="col-md-12 col-md-push-12"><div style="background:yellow;">in xs this first</div></div>
        <div class="col-md-12 col-md-pull-12"><div style="background:orange;">in xs this after</div></div>
    </div>
  </div>
</div>

＆＃13;

如您所见，在xs屏幕中，顺序是在屏幕上写的顺序。

我想要的是，在更大的分辨率上，顺序应该反转。即使我推/拉了12列（让它们倒置），结果也就是你所看到的。

你有什么建议吗？

谢谢

Answer 1

如果您对没有引导程序感兴趣，那么这是JSFiddle

您可以调用任何类并使用媒体查询明智地使用

HTML：

<div class="parent">
    <div class="child-1">
        <p>First</p>
    </div>
    <div class="child-2">
        <p>Second</p>
    </div>
</div>

CSS：

.parent{
  display:table;
  width: 100%;
}

.parent .child-1{
  display: table-footer-group;
  background:yellow;
}

.parent .child-2{
  display: table-header-group;
  background:green;
}

Answer 2

Bootstarp拉动需要正确的列号，如下所示

div style="border: solid 1px red">
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
</div>

Refer here

Answer 3

使用Bootstrap推拉类不可能反转全宽（12）列。您必须使用需要重复内容的响应式实用程序类。

或者，使用CSS媒体查询并转换以反转xs ...

上的顺序

@media (max-width: 768px) {
  .row.switch-xs {
    transform: rotate(180deg);
    direction: rtl;
  }

  .row.switch-xs > [class^="col-"] {
    transform: rotate(-180deg);
    direction: ltr;
  }
}

演示两种方法：http://bootply.com/nT8kUqB6d8

2017年更新

现在可以在XS上颠倒全宽列的顺序。

对于Bootstrap 4，不需要额外的CSS。只需使用弹性箱订购类即可＃34;拉出＆＃34; xs屏幕上的第二个div：

   <div class="row text-center">
        <div class="col-md-12">
            <div style="background:orange;">last on xs</div>
        </div>
        <div class="col-md-12 flex-first flex-md-unordered">
            <div style="background:yellow;">first on xs (pull me up)</div>
        </div>
    </div>

http://www.codeply.com/go/NV4mTbRKpC

引导拉/推12列无法正常工作

3 个答案:

2017年更新