Bootstrap 4 合并列与交替行

Question

我的 bootstrap 网站的布局由两栏组成（在桌面上）。在每一列上，内容都是静态堆叠的。两边的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 来合并两列的内部。我的小指告诉我，这在 bootstrap 和两个 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 class 添加到每个子元素（使用 col class）。

@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>

Bootstrap 4 合并列与交替行

Boostrap 4 merge columns with alternating rows

html

css

bootstrap-4

responsive