响应式之字形布局使用css？

<div class="container">
  <div class="row">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
  <div class="row">
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 33.33%; /* 每行显示3个item，占据1/3的宽度 */
  padding: 10px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .item {
    flex: 1 0 50%; /* 在小屏幕上每行显示2个item，占据1/2的宽度 */
  }
}