Question

我有3列，我想在桌面和移动设备上以不同的方式订购。目前，我的网格看起来像这样：

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

在移动视图中，我想要输出以下内容：

1-3-2

不幸的是，我不知道如何使用Bootstrap 4中的.col-md-push-*和.col-md-pull-*类来解决这个问题。

Answer 1

2018 - 使用最新的Bootstrap 4重新审视此问题。

自适应ordering classes现在是order-first，order-last和order-0 - order-12

<击> Bootstrap 4 推送拉类现在为push-{viewport}-{units}和pull-{viewport}-{units}，xs-中缀已被删除。在mobile / xs上获得所需的1-3-2布局将是：Bootstrap 4 push pull demo （这仅适用于4.0之前版本）

Bootstrap 4.1 +

由于Bootstrap 4是flexbox，因此可以轻松更改列的顺序。 cols可以从order-1到order-12进行排序，相对于父{{1} order-md-12 order-2（md上的最后一个，xs上的第二个}） }}

.row

演示：Change order using order-* classes

桌面（大屏幕）：

移动（小屏幕）：

也可以使用flexbox direction utils ...

更改列顺序

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

演示：Bootstrap 4.1 Change Order with Flexbox Direction

旧版演示
demo - alpha 6
demo - beta (3)

See more Bootstrap 4.1+ ordering demos

<小时/> 相关：
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns

A-C-B A-B-C

Answer 2

这也可以通过CSS“Order”属性和媒体查询来实现。

这样的事情：

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

CodePen链接：https://codepen.io/preston206/pen/EwrXqm

Answer 3

我使用的是Bootstrap 3，所以我不知道是否有更简单的方法来执行Bootstrap 4，但这个css应该适合你：

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

...并将类添加到第二列：

<div class="row">
    <div class="col-xs-3 col-md-6">
        1
    </div>
    <div class="col-xs-3 col-md-6 pull-right-xs">
        2
    </div>
    <div class="col-xs-6 col-md-12">
        3
    </div>
</div>

修改

哦......看起来我上面写的是exacly a。 pull-xs-right 类在Bootstrap 4：X只需将它添加到第二列，它应该可以正常工作。 / p>

Answer 4

即使这样也可以：

<div class="container">
            <div class="row">
                <div class="col-4 col-sm-4 col-md-6 order-1">
                    1
                </div>
                <div class="col-4 col-sm-4  col-md-6 order-3">
                    2
                </div>
                <div class="col-4 col-sm-4  col-md-12 order-2">
                    3
                </div>
            </div>
          </div>

Answer 5

由于列顺序在Bootstrap 4 beta中不起作用，如上面重新讨论的答案中提供的代码所述，您需要使用以下内容（如codeply 4 Flexbox命令演示中所示 - alpha / beta链接在答案中提供了。

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

但是请注意，“Flexbox订购演示 - 测试版”会转到alpha代码库，将代码库更改为Beta（并运行它）会导致div错误地显示在单个列中 - 但这看起来像是一个代码问题因为从代码中剪切和粘贴代码就像所描述的那样工作。

Answer 6

您可以使用移动订单执行两个不同的容器，并在桌面屏幕上隐藏，另一个使用桌面订单并隐藏在移动设备屏幕上

通过Bootstrap4订购列

6 个答案: