更改Flexbox HTML CSS的方向

我有一个有4张图片的flexbox。下面是它现在的样子。目前，当我缩小宽度时，您不会看到第四幅图像。

我希望flexbox转换成下面的布局。所以当宽度在某个px时，它会改变

我很难做到这一点。我尝试使用flex-direction:column；但这使得整个列表垂直，我不希望这样

div{
显示器：flex；
弯曲方向：缠绕；
边框样式：实心；
垫面：2米；
}
figcaption[认证=是]：：之前{
字体大小：0.75em；
/*复选标记*/
内容：“\2705”；
显示：内联块；
颜色：红色；
}
figcaption[认证=是]：：之后{
字体大小：0.75em；
/*李德帕利*/
内容:李,；
显示：内联块；
颜色：红色；
}
身材{
填充物：2.5em；
左边距：3em；
边缘底部：2米；
}
@媒体屏幕和屏幕（最大宽度：1185px）
{
//我希望第四张图片在你到达1185px的宽度时位于第一张图片的下方
div{
弯曲方向：立柱；
}
}

夜鹰
夜鹰
夜鹰
夜鹰

您有

弹性方向：包裹

尝试改为：
flex wrap:wrap

此外，不要使用
em
单位（或px或rem），而是使用
vw
和
vh
查看单位。这些单位代表当前屏幕宽度和高度的1%（您可以使用单位的分数，使其变得无限精细-例如
1.25vw
），因此边距/边框/填充/等也将随屏幕大小而增大/缩小。视图单位与百分比有何不同？百分比与父div大小的百分比相关，而视图单位是当前视口大小的百分比

参考资料：




演示：

div{display:flex；flex-wrap:wrap；边框样式：实心；padding-top:2em；}
figcaption[certification=yes]：{font size:0.75em；/*复选标记*/内容：“\2705”；显示：内联块；颜色：红色；}
figcaption[certification=yes]：：{font size:0.75em；/*Dispaly li*/content:li；显示：内联块；颜色：红色；}
图{填充：2.5em；左侧边距：3em；底部边距：2em；}
@媒体屏幕和屏幕（最大宽度：1185px）
{//我希望第四幅图像在宽度达到1185px时位于第一幅图像的下方
div{flex wrap:wrap；}
}

夜鹰
夜鹰
夜鹰
夜鹰