CSS Flexbox 布局 - 3 列和 2 列互换

.grid {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: calc(33.33% - 10px);
  height: 70px;
  margin: 5px;
  background: #BD1522;
}
.item:nth-child(10n + 4),
.item:nth-child(10n + 10) {
  flex: calc(66.66% - 10px);
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>