如何在响应时更改内容顺序？

Question

此问题已被多次询问和回答，例如here、here 和here， 但这些都是针对 Bootstrap 4 的——截至今天 2021 年 10 月 20 日，距离生命周期结束还有 11 个月的时间。 由于 Bootstrap 5 是唯一一个既受积极支持又没有明确的关键支持结束日期的 bootstrap 版本，我认为值得找到一个可行的解决方案。因此，我会再次提出这个问题，但会针对 Bootstrap 5 进行更新。我确实尝试对现有答案发表评论，但我的声誉太低，无法发表评论。也许那不是正确的地方，并且表明我应该发布一个新问题。

我的目标是拥有以下内容布局。

The two layouts 在左侧，我的默认/移动布局包含第 1、2 和 3 部分。 但在更大的设备上，我希望第 2 部分在左侧，第 1 和第 3 部分在右侧。

我试过这个，来自链接的问题 #1：

<div class="row d-sm-block">
    <div class="col-sm-9 order-2 order-md-0 float-left">2</div>
    <div class="col-sm-3 order-3 order-md-0 float-right">3</div>
    <div class="col-sm-3 order-1 order-md-0 float-right">1</div>
    <div class="col-sm-3 order-4 order-md-0 float-right">4</div>
</div>

在 Bootstrap 4 上，它可以工作，但在 Bootstrap 5 上却没有： first-solution

我尝试了这些，来自链接的问题 #2： https://www.codeply.com/go/8lsFAU3C5E https://www.codeply.com/go/mKykCsBFDX

但是将它们更改为 Bootstrap 5.0.2 或更高版本（我尝试了一些），它不会（视觉上）向左浮动 #2。 链接问题 #2 的另一个答案看起来很接近，但在任一引导程序上它都不正确： question 2, answer 3-ish 因为它会使第一部分与第二部分一样高，从而迫使第三部分始终独处。

所以我想知道是否有人有 Bootstrap 5 的解决方案。我可以做些什么来更改这些类以使其正确显示？ 这是一个准备就绪的 Bootstrap 5，我的 3 个部分：https://jsfiddle.net/uroabnxz/

或者，也许这是一个坏主意，也许 Bootstrap 故意破坏它是有原因的？如果有人反对这一点，我总是可以复制 HTML，并根据视口/断点显示/隐藏它。我不想这样做，因为它感觉很脏，但如果大多数人认为这是一个不错的解决方案，我可以这样做。

Answer 1

要获得与上图相同的结果，您需要使用display: block 和floats 而不是display: flex。而且在 Bootstrap v5 中，浮点数也被重命名了。

将 .float-left 和 .float-right 重命名为 .float-start 和 .float-end。 migration to v5

<div class="d-block">
  <div class="col-12 col-sm-6 bg-primary float-end">1</div>
  <div class="col-12 col-sm-6 bg-secondary float-start">2<br />is<br />taller</div>
  <div class="col-12 col-sm-6 bg-info float-end">3</div>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<h1>Hello, world!</h1>
<div class="container">
  <div class="d-block">
    <div class="col-12 col-sm-6 bg-primary float-end">1</div>
    <div class="col-12 col-sm-6 bg-secondary float-start">
      2<br />is<br />taller
    </div>
    <div class="col-12 col-sm-6 bg-info float-end">3</div>
  </div>
</div>

Answer 2

到目前为止，Bootstrap 5 似乎很自然地适应了我的经验，去吧！我发现它与从 v3 交换到 v4 的区别不大。根据响应式显示进行排序已完全解决，这里是文档，向下滚动到重新排序（订单类）...... https://getbootstrap.com/docs/5.0/layout/columns/