Place DIVS inside av DIV under the first DIV - css

Question

I would like to place to DIVS (grey & red) inside a DIV (black) under the first DIV (black) when you resize the window and the screen is less than 1024 px. Take a look at the example under. You can also see the image attached.
I would really like som advice here, im totally lost here at the moment.
This is how I want it to be on screens more than 1024px:
<div id="black">
<div id="grey"></div>
<div id="red"></div>
</div>
This is how I want it to be on screens less than 1024 px:
<div id="black"></div>
<div id="grey"></div>
<div id="red"></div>

Answer 1

There is no need to duplicate the content.
#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>

Answer 2

Sorry, but that is not possible as written.
You cannot move items outside their containing structures using CSS. You can only reformat them within their present structure.
Optionally, you can duplicate the existing black div and show/hide one or the other based on media queries (screen size).
Or, you can use jQuery/javascript to move the DOM items. But CSS alone cannot do this.

Answer 3

Using just CSS (with media queries) and two container <div>s to separate logic:
#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>
Above snippet better viewed in full page or this codepen