引导网格：如何更改列的位置？

Posted 2023-03-06

【中文标题】引导网格：如何更改列的位置？

【英文标题】：Bootstrap grid: How to change the place of a column?

【发布时间】：2021-01-08 08:30:15

【问题描述】：

我有一个关于我正在尝试实现的引导网格系统的问题 - 到目前为止还没有成功。

我正在尝试做以下网格系统：

我已尝试使用this JSFiddle 找到的代码。

    <div class="container mt-5">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
          <h3>Bloc 1</h3>
        </div>
        <div class="col-lg-6 col-md-6 col-12 border bg-light">
          <h3>Bloc 2</h3>
        </div>
        <div class="col-lg-6 col-md-12 bg-danger">
          <h3>Bloc 3</h3>
        </div>
      </div>
    </div>

它适用于 xs 和 md 系统。但是，我遇到了 lg 版本的问题，我找不到将 2 号区块（灰色）堆叠在 3 号区块（红色）之上的方法。有没有办法改变这种列的位置？如上图所示，块号 1 应位于页面底部。

非常感谢您的帮助！

【问题讨论】：

我看不出你在哪里实现了column ordering。

感谢@isherwood 的回复。是的，我到目前为止还没有；因为我不明白订购对我有什么帮助。主要问题是在 lg 上，蓝色列需要落到页面底部；而在 md 上，它需要停在与灰色列相同的级别。如果找到使用 Bootstrap 实现这一目标的方法，我不会成功；如果你有任何想法？非常感谢！

一开始我没有注意到你有一个嵌套行。这会破坏使用 Bootstrap 类的排序。有需要嵌套行的原因吗？

实际上没有任何理由。对不起这个错误。我已经更新了这里的代码，以及 JSFiddle 中的代码。共有三列。 lg 系统仍然存在主要问题，例如，我不能偏移六列，因为我希望蓝色块（第 1 号）落在页面底部（原因是这个块置顶）在 lg 设备上。

我建议您也切换到移动优先的思维方式。您的课程以与 Bootstrap 和大多数开发人员会做的相反顺序列出，并且您的图像也被反转。在 Bootstrap CSS 中，较大的断点会覆盖较小的断点，因此它们会在后面出现。

【参考方案1】：

基本上，您必须在灰色和红色 div 周围为第二列包装一个 div

<div class="container ">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
          <h3>Bloc 1</h3>
        </div>
        <div class="col-lg-6 col-md-6 col-12"><!--NEW DIV, moved column info here-->
          <div class=" border bg-light">
            <h3>Bloc 2</h3>
          </div>
          <div class=" bg-danger">
            <h3>Bloc 3</h3>
          </div>
        </div><!--new div end-->
      </div>
    </div>

您需要调整间距，但这是一个开始