css - 将 DIVS 放在第一个 DIV 下的 av DIV 中

Question

当您调整窗口大小时并且屏幕小于 1024 像素时，我想将 DIVS(灰色和红色)放在第一个 DIV(黑色)下的 DIV(黑色)内。看看下面的例子。您还可以查看附件中的图片。

我真的很想在这里得到一些建议，我现在完全迷失在这里。

这就是我希望它在大于 1024 像素的屏幕上的显示方式:

<div id="black">
    <div id="grey"></div>
    <div id="red"></div>
</div>

这就是我希望它在小于 1024 像素的屏幕上的显示方式:

<div id="black"></div>
<div id="grey"></div>
<div id="red"></div>

Answer 1

无需重复内容。

#black{background:black;overflow:hidden;}

#grey, #red{
  min-height:100px;
  margin:2%;
  float:left;
  width:47%;
}

#grey{background:gray;margin-right:1%}
#red{background:red;margin-left:1%}

@media (min-width:1024px){
  #black{padding-top:100px;}
  #grey, #red{
    float:none;
    width:auto;
    margin:0;
  }
}

<div id="black">
  <div id="grey"></div>
  <div id="red"></div>
</div>