Html 并排2个div=>；屏幕最小化=>；1在另一个下面

我有两个div，并且已经将它们并排对齐了。如果我最小化屏幕（例如，如果屏幕宽度为400px），我希望div在另一个下方对齐

我该怎么做？谢谢

#父级{
宽度：100%；
显示器：flex；
}
#第一节{
宽度：50%；
背景色：红色；
}
#第2节{
宽度：50%；
背景颜色：浅蓝色；
}

第1节/第1节/第1节/第1节/第1节/第1节/第1节/第1节
第1节/第1节/第1节/第1节/第1节/第1节/第1节/第1节

使用媒体查询

@media (max-width: 400px) {
    #section1, #section2 {
       width: 100%;
    }
}

---

仅供参考：

您需要生成最大宽度为400px的媒体查询。CSS如下所示：

@media (max-width: 400px) {
    #parent {
       display: block;
    }
}

---

以下是。

查看媒体查询请阅读。关键短语：“搜索、研究”和“解释……任何阻碍你自己解决的困难”。