Html CSS Flexbox–；第一行有1项，第二行有2项

我试图实现的是：

所有3项都在同一级别。第一个有一些额外的css类。代码方面，不可能在右侧的两个项目周围放置包装。代码如下所示：

<div class="wrapper">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item2 item2-extra"></div>
</div>

其结果是：

我需要将它放在Flex或CSS网格中，以根据视口更改右侧2个项目的顺序

由于所有3个项目都可以有不同的高度，并且我必须满足关于元素之间空间的UI/UX指南，因此右侧的项目不能简单地平均分享高度。在第一个结束后，第二个需要开始

我以前的帖子被标记为重复，所以它告诉我如果问题没有解决，就去问一个新的。所有3个项目都可以有不同的高度，因此不是以前标记的解决方案

---

代码示例：

如果我理解这个问题，我认为您正在寻找

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
    width: 100%;
}

.item1 {
    background: red;
    order: 1;
    flex: 0 0 100%;
}

.item2 {
    background: blue;
    order: 2;
    flex: 0 0 50%;
}

.item2-extra {
    background: green;
    order: 3;
}

---

即使高度不同，重复的解决方案仍然适用。主要技巧是使用（1）列方向或（2）CSS网格。。然后，您可以根据需要修改代码（我正在添加更多副本）

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
    width: 100%;
}

.item1 {
    background: red;
    order: 1;
    flex: 0 0 100%;
}

.item2 {
    background: blue;
    order: 2;
    flex: 0 0 50%;
}

.item2-extra {
    background: green;
    order: 3;
}