Bootstrap对齐不同高度的列

我希望能够将未知数量的列与未知的高度对齐。由于我不知道会有多少列，因此使用多行来分割列对我来说并不理想。我几乎可以通过使用列表项来达到我想要的结果。

我不喜欢使用列表项的一件事是，一旦页面达到调整大小点，我就会在右侧留下额外的空间。顶部的一组使用列表项，底部的一组使用 bootstrap 的 col。底部设置的问题是，当山口断裂时，它们没有与最左边的位置对齐。

有没有办法使用引导程序来实现这一点？

<div class="container-fluid">
    <div class="row">
               <ul>
                    <li class="list-item" style="height:200px;"></li>
                    <li class="list-item" style="height:120px;"></li>
                    <li class="list-item" style="height:100px;"></li>
               </ul>
    </div>
</div>


<div class="container-fluid">

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="box" style="height:200px"></div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="box" style="height:120px"></div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="box" style="height:100px"></div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="box"></div>
    </div>   
 </div>
</div>

jsFiddle https://jsfiddle.net/e66yc71f/

尝试这个 ：

.row {
  display: flex;
  flex-wrap: wrap;
}