如何使用 Flex 和保持在同一行的长文本更改列顺序

看起来像 CSS grid

<div class="grid">
  <div class="box orange"></div>
  <div class="box green"></div>
  <div class="box pink"></div>
  <div class="box blue"></div>
</div>

.grid {
  display: grid;
  grid-template-areas: "orange green blue" "orange pink blue";
  column-gap: unset;
}

.box {
  width: 100%;
  border: 1px solid black;
}

.orange {
  BACkground: orange;
  grid-area: orange;
  padding-top: 300px;
}

.green {
  BACkground: green;
  grid-area: green;
}

.pink {
  BACkground: pink;
  grid-area: pink;
}

.blue {
  BACkground: blue;
  grid-area: blue;
}