Css 通过Bootstrap4对列进行排序

我有3列，我想在桌面和手机上以不同的方式订购。 目前，我的网格如下所示：

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

1.
2.
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>

1.
2.
3.

编辑：

---

哦。。。看起来我上面写的是一个例子。在Bootstrap 4:X中向右拉xs类，只需将它添加到第二列，它就可以完美工作。2021-Bootstrap 5

响应式订购类别现在是

订单优先

，

订单最后

和

订单-0

-

订单-5

2018年-自举4

现在响应的是

order first

、

order last

和

order-0

-

order-12

Bootstrap 4**push****pull**类现在是`push-{viewport}-{units}`和`pull-{viewport}-{units}`并且`xs-`infix已经删除。要在mobile/xs上获得所需的1-3-2布局，需要：[引导4推拉演示](http://www.codeply.com/go/OmrcmepbUp)（这仅适用于4.0测试版之前的版本）

---

引导程序4.1+

因为Bootstrap4是flexbox，所以很容易更改列的顺序。COL可以从

order-1

到

order-12

，例如相对于父

行
的
order-md-12 order-2
（最后一个在
md
，第二个在
xs
）

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

演示：


旧版本演示






相关的




A-C-B A-B-C
由于列顺序在引导4 beta版中不起作用，如上述回访答案中提供的代码所述，您需要使用以下内容（如答案中提供的codeply 4 Flexbox订单演示-alpha/beta链接所示）


1.
3.
2.

然而，请注意，“Flexbox订单演示-beta”是一个alpha代码库，将代码库更改为beta（并运行它）会导致div错误地显示在一列中——但这看起来像是一个codeply问题，因为从codeply中剪切和粘贴代码是按上述方式工作的
 这也可以通过CSS“Order”属性和媒体查询来实现

大概是这样的：

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

代码笔链接：
即使这样也可以：

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


1.
2.
3.
文档中描述了这一点：col xx push和col xx pull-与bootstrap 3相同。您是否希望网格用于“md”和1-2以上，其他第3行用于“sm”和1-3-2以下？它可以工作，但这是不必要的数据重复。您可以通过操纵float参数来实现这一点（也可能通过其他方式）。。。我在样式代码中犯了一个错误：X现在就尝试。如果它不起作用，请尝试添加！漂浮很重要，这是一样的。我使用过bootsrap4中的.pull xs right类。@Alireza-the
order-*
类不能多次使用。这就是它的工作原理。从文件中。。“这些类是响应性的，因此您可以按断点设置顺序（例如，order-1.order-md-2）。包括在所有五个网格层中对1到12的支持。”@Zim so
order-2 order-md-12
类不能一起使用？否，它们可以一起使用。@Zim
order-md-1 order-sm-2
和
order-1 order-sm-2
不起作用。我是手动操作的，如果您使用的是上述版本，它们就可以工作。另外，我不知道你想要完成什么，这很可能与我的答案适用的原始问题不同。记住，COL在同一行中是相对的。我无法仅为移动设备获取引导类的顺序。这确实有效，谢谢
<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>