Question

我有这个简单的场景：

<div class="row">
    <div class="col-md-12 col-lg-6 col-xl-7">A</div>
    <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

基本上是md

A
B

我希望如果md

B
A

我尝试过在网络上找到的很多变种，例如flex-first等等......似乎无法让它发挥作用

有什么想法吗？

Answer 1

如果您想更改md和更大尺寸的订单，可以使用order-md-，这由bootstrap提供。看起来，如果您只想在md尺寸上更改订单，则必须在一个较大尺寸Fiddle上定义正常订单

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 order-md-2">A</div>
  <div class="col-md-12 order-md-1">B</div>
</div>

＆＃13;

Answer 2

也可以使用<input type="search" class="form-control" ng-model="searchtext" placeholder="search here..." /> <div ng-repeat="cust in customers |orderBy:'id' | filter:searchtext"> </div> $scope.customers = [{ "id": 1, "first_name": "Anand!", "last_name": "GK", "gender": "Male" }, { "id": 2, "first_name": "ABC !", "last_name": "XYZ", "gender": "Female" }];帮助程序类来解决此问题。此解决方案允许您在不使用列的订单计数的情况下撤消订单。

＆＃13;

flex-

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="row flex-column-reverse flex-lg-row"> <div class="col-md-12 col-lg-6 col-xl-7">A</div> <div class="col-md-12 col-lg-6 col-xl-5">B</div> </div>现在默认情况下是反转的（md），将在lg断点上覆盖。

Answer 3

最简单的解决方案是：

.row{
    flex-direction: row-reverse;
}

Answer 4

对于Bootstrap v4.1，您可以使用

<div class="row flex-row-reverse">
    <div class="col-md-12 col-lg-6 col-xl-7">A</div>
    <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

此处提供更多信息：https://getbootstrap.com/docs/4.1/utilities/flex/#direction

Answer 5

我知道问题是关于 Bootstrap 4，但我看到有人问如何在版本 5 中做到这一点。示例如下：

<div class="col-md-6 order-2 order-md-1">
    <!-- YOUR CODE -->
</div>

<div class="col-md-6 order-1 order-md-2">
    <!-- YOUR CODE -->
</div>

参考：https://getbootstrap.com/docs/5.0/layout/columns/#order-classes

Bootstrap 4，如何反转列的顺序？

5 个答案: