在 Bootstrap 5.0 中使用响应式重新排序 div

Question

我在使用 Bootstrap v5.0 使用 HTML、CSS 进行网页设计时遇到问题。 特别是，我有 3 个 div A、B、C，我希望它们响应式地重新排序，如下图所示。 A 是一个 h2 + p，B 是 2 个按钮，C 是一个图像。

我的第一种方法是将 A 和 B 分组到 col-lg-6 中，将 C 分组到另一个 col-lg-6 中，但这种方式不合适，因为代码必须遵循 ACB 的顺序才能获得移动视图，如图片。

我在 StackOverflow 上搜索并尝试了多篇关于此问题的帖子，但解决方案位于 Twitter Bootstrap 3 或 Bootstrap 4（使用推/拉类）中。一些答案说，在 Bootstrap 5.0 中，我们使用 -order 来解决此类问题。但是我试过了，失败了，看完文档后我真的不明白 -order 是如何工作的。

那么有人可以帮我解决这个问题吗？非常感谢！

Answer 1

最简单的方法是在特定断点上“禁用”弹性框，这将允许浮动工作。这可以使用所有 Bootstrap 5 类来完成，因此没有额外的 CSS...

<div class="container">
    <div class="row g-3 d-flex d-md-block">
        <div class="col-md-6 float-start">
            <div class="card card-body">A</div>
        </div>
        <div class="col-md-6 float-end">
            <div class="card card-body tall">C</div>
        </div>
        <div class="col-md-6 float-start">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

Floats in Bootstrap 5 demo

或者，您可以在 Bootstrap 5 中使用新的 CSS-grid 类。但这需要您 $enable-cssgrid 和 SASS：

<div class="container">
    <div class="grid">
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">A</div>
        </div>
        <div class="g-col-md-6 g-col-12" style="grid-row: span 2;">
            <div class="card card-body tall">C</div>
        </div>
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

CSS grid demo

---

相关：Bootstrap with different order on mobile version

Answer 2

这可以在没有带有网格的 Bootstrap 的情况下实现。我为您创建了一个示例。

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

#grid {
  display: grid;
  grid-template-rows: 3fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'A C' 'B C';
  grid-gap: 1rem;
}
@media (max-width: 576px) {
  #grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    grid-template-areas: 'A' 'C' 'B';
  }
}
#a {
  grid-area: A;
  border: 1px solid black;
  text-align: center;
}
#b {
  grid-area: B;
  border: 1px solid black;
  text-align: center;
}
#c {
  grid-area: C;
  border: 1px solid black;
  text-align: center;
}

<div id="grid">
  <div id="a">A</div>
  <div id="c">C</div>
  <div id="b">B</div>
</div>

或者，您可以在显示实用程序中使用 Bootstrap 的断点，如下所示：

#grid {
      grid-template-rows: 3fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 'A C' 'B C';
      grid-gap: 1rem;
    }
    @media (max-width: 576px) {
      #grid {
        grid-template-rows: auto auto auto;
        grid-template-columns: auto;
        grid-template-areas: 'A' 'C' 'B';
      }
    }
    #a {
      grid-area: A;
      border: 1px solid black;
      text-align: center;
    }
    #b {
      grid-area: B;
      border: 1px solid black;
      text-align: center;
    }
    #c {
      grid-area: C;
      border: 1px solid black;
      text-align: center;
    }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex d-sm-grid flex-column" id="grid">
  <div id="a">A</div>
  <div id="c">C</div>
  <div id="b">B</div>
</div>