Html 弹性项目赢得'；不要适当地包装和收缩

我希望在较小的设备上，右侧的flex项目可以包装在图像下。我还希望这两个flex项目在收缩时彼此具有相同的高度（以及浏览器窗口）

。新建集合包装器{
背景色：#f1f1；
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
.新的收款卡{
宽度：80%；
边缘：5em0；
显示器：flex；
对齐项目：居中；
}
.新的收款卡img img{
高度：400px；
宽度：自动；
}
.新收藏内容{
高度：400px；
颜色：#f1f1；
背景色：#111111；
填充：0.3em；
}
.新收藏内容h3{
字号：2.5em；
字体大小：300；
文本转换：大写；
线高：1.3；
边缘底部：2米；
}
.新收藏内容{
字体系列：“Roboto”，无衬线；
字体大小：300；
字体大小：.8em；
字母间距：1px；
}
/*中等屏幕布局*/
@媒体屏幕和屏幕（最小宽度：810px）{
.新收藏内容{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
}

AW19系列
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。身体，是一种不常见的疾病。我是一个好朋友

将

柔性方向

更改为较小屏幕上的

柔性方向（请注意，介质查询已更改为
@介质屏幕，并将
新采集卡上的（最大宽度：810px）
更改为列-请参阅下面的演示：


。新建集合包装器{
背景色：#f1f1；
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
.新的收款卡{
宽度：80%；
边缘：5em0；
显示器：flex；
对齐项目：居中；
}
.新的收款卡img img{
高度：400px；
宽度：自动；
}
.新收藏内容{
高度：400px；
颜色：#f1f1；
背景色：#111111；
填充：0.3em；
}
.新收藏内容h3{
字号：2.5em；
字体大小：300；
文本转换：大写；
线高：1.3；
边缘底部：2米；
}
.新收藏内容{
字体系列：“Roboto”，无衬线；
字体大小：300；
字体大小：.8em；
字母间距：1px；
}
@媒体屏幕和屏幕（最大宽度：810px）{
.新采集卡{/*更改弹性方向*/
弯曲方向：立柱；
}
}

AW19系列
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。身体，是一种不常见的疾病。我是一个好朋友

我刚刚意识到我的新收集卡上没有flex包装，这是flex项目的父项。不是flex项目彼此重叠，而是不像在较大屏幕上那样排成一行：/非常感谢，我真的很感激！