Boostrap 4 将列与交替行合并

Question

我的引导网站的布局由两列组成（在桌面上）。在每一列上，内容都是静态堆叠的。两侧div都有不同的高度，如下所示：

A | B

A | D 

C | D

E | F

E

现在，我已经用两个实现了这一布局col-6，并用 content 填充了每个布局div。

但是，移动布局的断点仅设计用于将列堆叠在一起，如下所示：

A

A

C

E

E

B

D

D

F

我的问题是，在上面的插图中， Adiv与 B 相关div，与 C 关系不大div。我希望以移动布局的方式实现我的两列桌面布局：

A

A

B

C

D

D

E

E

F

div在移动设备上，它实际上要求通过交替包含在行序列中的两列内部来合并。我的小指告诉我，这在引导程序中不可能有两个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) {&nbsp; .card-columns.column-2 {&nbsp; &nbsp; -webkit-column-count: 2;&nbsp; &nbsp; -moz-column-count: 2;&nbsp; &nbsp; column-count: 2;&nbsp; }}<div class="container">&nbsp; <div class="card-columns column-2 row d-sm-block">&nbsp; &nbsp; <div class="col-12 order-1">A<br/>A</div>&nbsp; &nbsp; <div class="col-12 order-2">C</div>&nbsp; &nbsp; <div class="col-12 order-1">B</div>&nbsp; &nbsp; <div class="col-12 order-2">D<br/>D</div>&nbsp; </div>&nbsp; <div class="card-columns column-2 row d-sm-block">&nbsp; &nbsp; <div class="col-12 order-1">E<br/>E</div>&nbsp; &nbsp; <div class="col-12 order-2">F</div>&nbsp; </div></div>