Bootstrap 4 引导4个相同高度的卡片列

我正在尝试用新的Bootstrap4.0建立一个网站，并尝试使用新的卡片功能

我想得到的是你在照片A中看到的

在2处减少柱后

.card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    column-gap: 0;
}

把所有的东西都放在卡栏里

<div class="card-columns">
 <div class="card">card1</div>
 <div class="card">card2</div>
 <div class="card">card3</div>
 <div class="card">card4</div>
</div>
<div class="col-lg-12">landscapeImage</div>

卡片1
卡片2
卡片3
卡片4
景观意象

我在B中得到结果，在最短的列和风景图像之间有一个空白

我想强制这两根柱子的高度相同

我想把所有的东西放在一个有最短圆柱高度的大div里，然后溢出最高的圆柱，但我做不到

我能做什么？ 有可能用干净的方式做吗

提前感谢您的帮助

<div class="card h-100 card-body">

---

下面是一个示例

请尝试在绿色栏（可用空间）中添加class

h-100

。非常有效，谢谢（+1）。我不明白降级的原因。