通过 Bootstrap4 对列进行排序

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 中的 .col-md-push-* 和 .col-md-pull-* 类来解决这个问题 4.

Answer 1

您可以做两个不同的容器，一个是移动订单并隐藏在桌面屏幕上，另一个是桌面订单并隐藏在移动屏幕上

Answer 2

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

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

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

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

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

编辑：

哦...看起来我上面写的完全是一个 .pull-xs-right class in Bootstrap 4 :X只需将它添加到第二列，它应该可以完美运行。

Answer 3

2021 - Bootstrap 5

响应式排序类现在是 order-first、order-last 和 order-0 - order-5

Demo

2018 - Bootstrap 4

响应式 ordering classes 现在是 order-first、order-last 和 order-0 - order-12

Bootstrap 4 **push** **pull** 类现在是 `push-{viewport}-{units}` 和 `pull-{viewport}-{units}` 和 ` xs-` 中缀已被删除。要在 mobile/xs 上获得所需的 1-3-2 布局将是：[Bootstrap 4 推拉演示](http://www.codeply.com/go/OmrcmepbUp)（这只适用于 pre 4.0 beta）

Bootstrap 4.1+

因为Bootstrap 4 是flexbox，很容易改变列的顺序。 cols 可以从 order-1 到 order-12 排序，例如 order-md-12 order-2（最后一个 md，第二个 xs）相对于父 [=25] =].

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

演示：Change order using order-* classes

桌面（更大的屏幕）：

移动设备（较小的屏幕）：

也可以使用 flexbox direction utils...

更改列顺序

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

演示：Bootstrap 4.1 Change Order with Flexbox Direction

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

See more Bootstrap 4.1+ ordering demos

相关

A-C-B A-B-C

Answer 4

由于列排序在 Bootstrap 4 beta 中不起作用，如上面重新访问的答案中提供的代码中所述，您需要使用以下内容（如 codeply 4 Flexbox order demo 中所示- 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 order demo - beta" 转到 alpha 代码库，将代码库更改为 Beta（和运行它）会导致 div 在单个列中错误显示 - 但看起来就像一个 codeply 问题，因为从 codeply 中剪切和粘贴代码可以按照描述的方式工作。

Answer 5

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

像这样：

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

CodePen Link: https://codepen.io/preston206/pen/EwrXqm

Answer 6

即使这样也行得通：

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

通过 Bootstrap4 对列进行排序

Order columns through Bootstrap4

css

grid

twitter-bootstrap

bootstrap-4