在引导网格中水平堆叠列

Question

我有一个图片库页面，我正在使用 Bootstrap v4.4 为该页面创建一个网格系统。我有一个管理区域，我可以在其中上传图像，并且带有 div 类的 row 是根据可用图像动态填充的。这是页面加载后代码的样子：

<div class="container-fluid">
    <div class="row" id='portfolioRow'>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a class="gallery__item fresco" href="imageUrl" data-fresco-group="gallery">
                <img src="imageUrl1">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a class="gallery__item fresco" href="imageUrl" data-fresco-group="gallery">
                <img src="imageUrl2">
            </a>
        </div>
        ...
        <div class="col-lg-3 col-md-4 col-sm-6">
            <a class="gallery__item fresco" href="imageUrl" data-fresco-group="gallery">
                <img src="imageUrln">
            </a>
        </div>
    </div>
</div>

问题是，一旦我点击另一行，下一行就会与前一行中最大元素的高度对齐，例如如下图所示：

我希望列堆叠并忽略其他图像的高度：

现在我尝试使用 d-block + float-left 和 clearfix，但它没有产生我想要的结果。任何帮助表示赞赏，谢谢:)