在第一个DIV下将DIVS置于av DIV内

Question

当您调整窗口大小并且屏幕小于1024像素时，我想在第一个DIV（黑色）下面的DIV（黑色）内放置DIVS（灰色和红色）。看看下面的例子。您还可以看到附加的图像。

我真的很喜欢这里的建议，我现在完全迷失了。

这就是我想要它在超过1024px的屏幕上的方式：

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

这就是我想要它在1024 px以下的屏幕上的方式：

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

Answer 1

无需复制内容。

＆＃13;

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

很抱歉，但这是不可能的。

您无法使用CSS将项目移动到其包含结构之外。您只能在其当前结构中重新格式化它们。

您可以选择复制现有的黑色div并根据媒体查询（屏幕大小）显示/隐藏其中一个。

或者，您可以使用jQuery / javascript来移动DOM项目。但仅靠CSS无法做到这一点。

Answer 3

仅使用CSS（使用媒体查询）和两个容器<div>分隔逻辑：

@media (max-width: 1024px) {
  .large { display: none; }
  .small { display: block; }
  .black { height: 100px; }
}

@media (min-width: 1025px) {
  .large { display: block; }
  .small { display: none; }
  .red, .grey { float: left; }
  .black:after { content: ""; display: table; clear: both; }
  .red { width: calc(50% - 5px); margin-left: 10px; }
  .grey { width: calc(50% - 5px); }
}

.large {
  height: 200px;
}

.small {
  height: 200px;
}

.black {
  background-color: black;=
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
}

.red {
  background-color: red;
  height: 100px;
}

.grey {
  background-color: grey;
  height: 100px;
}

<div class="large">
  <div class="black">
    <div class="grey"></div>
    <div class="red"></div>
  </div>
</div>

<div class="small">
  <div class="black"></div>
  <div class="grey"></div>
  <div class="red"></div>
</div>

在full page或此codepen

中更好地查看了以上代码段