如何在Bootstrap 5中使用推拉？

Question

我想在 Bootstrap v5.0.0-beta2中使用推送、拉取功能，但是如何操作呢？

在 Bootstrap 3 中，我这样使用它：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

我试过。但我不能。这是我的JSFiddle

在Bootstrap V5中，如何使用push和pull？请帮忙。

提前致谢。

Answer 1

推/拉是一种网格技术。现在它已被弃用，取而代之的是 flex。对于 flex 来说，辅助类是.order-. 请参阅 BS5列文档。

您可以使用全局排序：

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

或者特定于屏幕尺寸...即.order-sm-*，，.order-lg-*等等。

如果您只想移动，请使用偏移列

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

编辑：

根据您的情况，您可以使用：

<div class="row">
  <div class="col-md-9 order-last">.col-md-9 <del>.col-md-push-3</del><ins>order-last</ins></div>
  <div class="col-md-3 order-first">.col-md-3 <del>.col-md-pull-9</del><ins>order-first</ins></div>
</div>

或者：

<div class="row">
  <div class="col-md-9 order-2">.col-md-9 <del>.col-md-push-3</del><ins>order-2</ins></div>
  <div class="col-md-3 order-1">.col-md-3 <del>.col-md-pull-9</del><ins>order-1</ins></div>
</div>