如何堆叠浮动元素乱序

Question

我有一个包含两列的响应式网站。每列中的元素都有不同的高度，所以我不认为我可以使用CSS网格。我希望页面两侧的元素垂直堆叠，它们之间没有间隙。当屏幕尺寸减小时，我希望div按顺序保留并折叠成一列，因此我无法将这些元素放在两个单独的容器中。

现在，每个右手栏元素与前面（较长）左手栏元素的顶部齐平。我不明白为什么会这样，因为我认为浮动的元素已经被淘汰了。

有没有办法得到我想要的东西？

＆＃13;

＆＃13;

.left {
  background-color: green;
  border: 1px solid black;
  width: 300px;
  height: 600px;
  float: left;
  clear: left;
}

.right {
  background-color: yellow;
  border: 1px solid black;
  width: 300px;
  height: 300px;
  float: right;
  clear: right;
}

＆＃13;

<div class="left">

</div>

<div class="right">

</div>

<div class="left">

</div>

<div class="right">

</div>

<div class="left">

</div>

<div class="right">

</div>

＆＃13;

＆＃13;

＆＃13;

我想要两个冲洗的盒子，所有的黄色盒子都垂直相互冲洗。