动态div列位置

Question

我有一个页面，其中有其他页面的卡片具有相同的宽度和不同的高度。我需要将每张下一张卡片放在当前的最小列中。我现在得到的是：

.card {
  width: 50%;
  margin: 0;
  float: left;
  height: 32px;
}
.a { background-color: red; }
.b { background-color: yellow; height: 80px; }
.c { background-color: green; }
.d { background-color: blue; }
.e { background-color: gray; }

<div class="card a">a</div>
<div class="card b">b</div>
<div class="card c">c</div>
<div class="card d">d</div>
<div class="card e">e</div>

在这里，我要实现的目标是：“ b”放在“ a”旁边，因为第二列较小，然后“ c”放在“ a”下方，因为第一列较小，然后是“ d”之所以将其放置在“ c”下是因为第一列仍然较小，而“ e”则被放置在“ b”下方是因为第二列现在较小。

_{注意：卡的宽度是根据屏幕宽度动态设置的，因此解决方案应该是动态的，并且不能依赖于列数（可能是其中的1-4）}

我在Google上搜索了很多，但什么也没发现我尝试将flexbox应用于此，但似乎该技术在这里无济于事。不使用JS完全有可能吗？

我也seen Masonry，但是它可以处理更复杂的情况，即宽度不同的元素。我的情况更简单，元素具有相同的宽度，所以我希望有一个CSS解决方案...