我有三個div，我希望它們在屏幕空間允許的情況下排成一行，但如果不允許，中間的div應該留在頂部，而左邊和右邊應該移到它的下面。鑒于對Bootstrap類似問題的回答(如何在Bootstrap的小屏幕上推動中間的div ),看起來這是可行的，但我想看看實際的CSS。

<div class="left">
LEFT
</div>
<div class="middle">
THIS IS A LONG TEXT
</div>
<div class="right">
RIGHT
</div>

這是關于如何使用CSS網格和媒體查詢的實際CSS。

.grid {
  display: grid;
  grid-template-areas: "middle" "left" "right";
}

.left {
  grid-area: left;
}

.middle {
  grid-area: middle;
}

.right {
  grid-area: right;
}

@media (min-width:600px) {
  .grid {
    grid-template-areas: "left middle right";
  }
}

<div class="grid">
  <div class="left">
    LEFT
  </div>
  <div class="middle">
    THIS IS A LONG TEXT
  </div>
  <div class="right">
    RIGHT
  </div>
</div>