• • 2021年- Bootstrap 5**

响应订购类现在为order-first、order-last和order-0-order-5
Demo

• • 2018- Bootstrap 4**

响应订购类现在为order-first、order-last和order-0-order-12
Bootstrap 4push****pull类现在是'push-{viewport}-{units}'和'pull-{viewport}-{units}'，并且删除了'xs-'中缀。要在mobile/xs上获得所需的1 - 3 - 2布局，可以使用以下方法：[ Bootstrap 4推拉演示]（http：//www.codeply.com/go/OmrcmepbUp）（仅适用于4.0测试版之前的版本）

• • Bootstrap 4.1 +**

由于Bootstrap 4是Flexbox，因此很容易改变列的顺序。列可以从order-1到order-12排序，例如order-md-12 order-2（最后一个在md上，第二个在xs上）相对于父.row。

<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实用程序更改列顺序...

<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

• • 相关**

Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4更改列的顺序
A-C-B A-B-C

这也可以通过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

即使这样也能奏效：

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

我正在使用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>

编辑：

哦...看起来我上面写的是一个.pull-xs-right类在Bootstrap 4：X中，只要把它添加到第二列，它就可以完美地工作了。

由于列排序在Bootstrap 4测试版中不起作用（如上面重新访问的答案中提供的代码所述），因此您需要使用以下代码（如答案中提供的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 order demo - beta”使用alpha代码库，将代码库更改为Beta（并运行它）会导致div错误地显示在一列中--但这看起来像是代码层问题，因为从代码层中剪切和粘贴代码的工作原理如上所述。

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