Bootstrap 4中带有push / pull和col-md-12的列排序

  • Z时代
  • 2024-01-10
  • 分类：问答

我col-md-12每个班都有两列。

在桌面视图中，它们应显示为：

Col **1** 
Col **2**

在移动视图中，应显示如下：

Col **2**
Col **1**

使用Bootstrap的列排序是否有可能？

我当前的代码：

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>

回答：

回答：

现在，引导程序已经发布，您可以使用

实用程序类，就像在Beta版中一样（参见下面的旧更新），可以实现，区别在于他们添加了这3个新类：

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}
.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}
.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

片段

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

旧更新（OCT 2017）-v4.0.0 beta

在测试版中，您可以使用引导程序中的flexbox实用程序来执行此操作，例如flex-

order

（请参阅@ZimSystem的答案-以查看具有Alpha版本的解决方案）

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-1 order-lg-2">2</div>
</div>

以上是 Bootstrap 4中带有push / pull和col-md-12的列排序 的全部内容， 来源链接： utcz.com/qa/433571.html

回到顶部