Css 仅合并两个柔性柱而不合并第三个柔性柱的问题

我目前正在使用flex来控制我网站的布局。有一个“容器”具有显示：flex，内部有三个flex列。这一点如下所示。我想做的是，随着屏幕宽度变小，我想使用CSS来改变顺序（我知道怎么做），但也会合并两列，留下一列分开（如下所示）。你会怎么做？我可以改变flex的方向，使其垂直，但我不希望包含第三列

How it is now:                        How I want it :)
|------|  |------|  |------|         |------|  |------|
|      |  |      |  |      |         |  A   |  |  B   |
|  A   |  |  B   |  |  C   |         --------  |      |
|      |  |      |  |      |         |------|  --------
--------  --------  --------         |  C   |  
                                     --------

如您所见，我希望C块改变顺序，并在A下堆叠，而不影响B

谢谢你的帮助

试试这段代码

.item{
宽度：33.33%；
高度：200px；
背景：红色；
边框：实心2px#000；
框大小：边框框；
}
.集装箱{
显示器：flex；
柔性包装：包装；
}
@媒体屏幕和屏幕（最大宽度：1000px）{
.项目{
宽度：50%；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.项目{
宽度：100%；
}
}

---

您可以在

wrap

和

nowrap

之间切换

flex wrap

.flex{
显示器：flex；
柔性包装：包装；
}
.flex>div{
弹性基准：50%；
}
@介质（最小宽度：650px）{
.flex{
柔性包装：nowrap；
}
}

A.
B
C

请显示您当前的css和html-请查看如何创建a。B可以高于a吗。。。。也就是说，如果B中的内容增长，它是否应该独立于A和C垂直增长？