Bootstrap：如何强制div元素列表每行保持两个

Question

我有一张客户卡网格，它根据窗口的宽度（每行1个/每行2个/每行3个...）来改变大小。减小窗口大小时，可以使用Bootstrap扩展这些名片的高度。

问题在于，当第一张卡片（或第二张卡片，每行3张）的高度增加时，在其下没有足够的空间容纳另一张卡片，因此最右边的卡片会堆积起来。

这是问题的一个例子。

我在div上尝试了display: inline;及其不同的值，但无法获得所需的结果。

每个div的代码

<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
    <div class="widget widget-client">
        <div class="client-profile">...Profile Picture...</div>
        <div>...Infos....</div>
        <div class="widget-actions clearfix">...Bottom actions...</div>
    </div>
</div>

我的目标是每行始终有2张（或3张，取决于屏幕大小）卡。

我如何获得那个结果？