2个并排的div =＆gt; screen minimze =＆gt;另一个下一个

Question

我有2个DIV并且已经将它们并排排列。如果我最小化我的屏幕（例如，如果屏幕宽度是400px），我希望DIV在另一个下面对齐。

我该怎么做？感谢。

#parent {
  width: 100%;
  display: flex;
}

#section1 {
  width: 50%;
  background-color: red;
}

#section2 {
  width: 50%;
  background-color: lightblue;
}

<div id="parent">
  <div id="section1">
    Section 1/ Section 1/ Section 1/ Section 1/Section 1/ Section 1/ Section 1/ Section 1
  </div>
  <div id="section2">
    Section 1/ Section 1/ Section 1/ Section 1/Section 1/ Section 1/ Section 1/ Section 1
  </div>
</div>

Answer 1

使用媒体查询

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

供参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

您需要为max-width：400px生成媒体查询。 CSS看起来像这样：

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

这是fiddle。