Bootstrap：将嵌套行移动/组合到其他列中答案

【问题标题】：Bootstrap: Move/Combine nested rows into other columnsBootstrap：将嵌套行移动/组合到其他列中
【发布时间】：2021-05-20 07:39:29
【问题描述】：

我有一个布局，中间是主要内容，右侧边栏是动作/信息。（左侧边栏在移动设备上隐藏）。我希望结合这些引导列。在移动设备上查看时，我希望右侧栏列的第一行位于中间/主列的两行之间。在移动设备上查看时，右侧栏列的第二行排在中间/主列的所有行之后。这是它在大屏幕上的样子：

|------| |----|
| c1r1 | |c2r1|
|      | |----|
|------| |c2r2|
| c2r2 | |    |
|      | |----|
|      | 
|      |
|------|

这就是我需要它在小尺寸上的样子（我首先开始为移动设备编写代码，但从大到小显示最容易）：

|------|
| c1r1 |
|      |
|------|
| c2r1 |
|------|
| c1r2 |
|      |
|      |
|------|
| c2r2 |
|------|

有没有办法使用引导程序或其他 css 有机地实现这一目标？如果我只为两者使用一列，那么每行的高度将相同和/或与上方/下方的元素不正确对齐。

这基本上是我的代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 d-none d-md-block">
            <div class="row">Some stuff in the first col that doesn't show on small</div>
        </div>
        <div class="col-12 col-md-6">
            <div class="row">The main column first row</div>
            <div class="row">The main column second row</div>
        </div>
        <div class="col-md-3 col-sm">
            <div class="row">Sidebar action item stuff that should go below the main column first row</div>
            <div class="row">Sidebar info that should go below the main column second row</div>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css flexbox rows

【解决方案1】：

问题是我使用的是嵌套的行/列。如果我将所有内容放在一行中，那么我可以使用 float 和 order 来获得所需的结果。 https://stackoverflow.com/a/52043188/14183408

【讨论】：

【解决方案2】：

您可以将 flex 布局添加到您的 html 元素中

我使用“Bootstrap”来帮助进行样式设置。 "d-flex flex-column"

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="col-md-3 d-none d-md-block">
    <div>Some stuff in the first col that doesn't show on small</div>
  </div>
  <div class="row border d-flex flex-column">
    <div class="col-4 col-md-4 border">
      <b>Column one Row one:</b> The main column first row
    </div>
    <div class="col-4 col-md-4 border"><b>Column two Row one:</b> Sidebar action item stuff that should go below the main column first row</div>
  </div>
  <div class="row border d-flex flex-column">
    <div class="col-4 col-md-4 border">
      <b>Column one Row two:</b> The main column second row
    </div>
    <div class="col-4 col-md-4 border"><b>Column two Row two:</b> Sidebar info that should go below the main column second row</div>
  </div>
</div>

【讨论】：