css - 反转列顺序

Question

我需要在右上角有一个固定的绿色元素。

我尝试了 flex 元素，但它仅适用于具有相同高度的元素，否则，我在行之间有空白空间

.container {
  width: 100%;
  columns: 3;
}

.item {
  height: 20px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  background-color: purple;
  text-align: center;
  color: white;
  page-break-inside: avoid;
  break-inside: avoid;
}

.item.green {
    background-color: green;
    height: 40px;
}

<div class="container">
  <div class="item green">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item">G</div>
</div>

标签： css