Boostrap 4 将列与交替行合并

Question

我的引导网站的布局由两列组成（在桌面上）。在每一列上，内容都是静态堆叠的。两侧div都有不同的高度，如下所示：A | BA | D C | DE | FE现在，我已经用两个实现了这一布局col-6，并用 content 填充了每个布局div。但是，移动布局的断点仅设计用于将列堆叠在一起，如下所示：AACEEBDDF我的问题是，在上面的插图中， Adiv与 B 相关div，与 C 关系不大div。我希望以移动布局的方式实现我的两列桌面布局：AABCDDEEFdiv在移动设备上，它实际上要求通过交替包含在行序列中的两列内部来合并。我的小指告诉我，这在引导程序中不可能有两个col-6. 我希望尽可能避免 JavaScript 和自定义 CSS。也许整体布局需要在没有col-6. 也许card-deck可以提供帮助，但我没有找到任何令人满意的东西。当前代码：         <div class="container">                    <div class="row pl-sm-3 px-1">                        <div class="col-md-6 pt-sm-4">                  <div class="row pb-5 justify-content-center">                    <h1 class="display-4 text-light">                           {{ $.Page.Title }}                    </h1>                  </div>                  <div class="text-center">                    {{ range .Params.pictures }}                        <img ... >                    {{end}}                  </div>                </div>                        <div class="col-md-6 pl-3 pr-4">                    <div class="mt-5 pt-5"></div>                    <div class="card">                    {{ range .Params.text}}                        <div class="card-body">                                        ...                        </div>                    {{end}}                    </div>                </div>            </div>          </div>

Answer 1

您可以使用 bootstrap 来完成此操作，但必须添加下面的小 CSS 片段。经过一些测试后，我为您找到了一个解决方案，其中我还使用了卡片网格。

如果您想使用 boostraps 卡，您可以将该card类添加到每个子元素（使用 col 类）。

@media (min-width: 576px) {

  .card-columns.column-2 {

    -webkit-column-count: 2;

    -moz-column-count: 2;

    column-count: 2;

  }

}

<div class="container">

  <div class="card-columns column-2 row d-sm-block">

    <div class="col-12 order-1">A<br/>A</div>

    <div class="col-12 order-2">C</div>

    <div class="col-12 order-1">B</div>

    <div class="col-12 order-2">D<br/>D</div>

  </div>

  <div class="card-columns column-2 row d-sm-block">

    <div class="col-12 order-1">E<br/>E</div>

    <div class="col-12 order-2">F</div>

  </div>

</div>