Bootstrap 4合并列与交替行答案

【问题标题】：Boostrap 4 merge columns with alternating rowsBootstrap 4合并列与交替行
【发布时间】：2020-07-14 07:02:34
【问题描述】：

我的引导网站有一个由两列组成的布局（在桌面上）。在每一列上，内容都是静态堆叠的。两边的div 有不同的高度，像这样：

A | B
A | D 
C | D
E | F
E

现在，我用两个col-6 实现了这个布局，并用内容div 填充每个布局。

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

A
A
C
E
E
B
D
D
F

我的问题是，在我上面的插图中，A div 与 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>

【问题讨论】：

请发布您的代码

标签： html css bootstrap-4 responsive

【解决方案1】：

你可以用 bootstrap 来做，但你必须在下面添加小的 CSS sn-p。经过一些测试，我为您找到了一个解决方案，我也使用了卡片网格。

如果您想使用 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>

【讨论】：