Child element above parent element on a small screen - html

Question

I have 2 divs, one nested inside of the other. According to the page design, the nested div needs to appear normally inside its parent on a large screen, as in this image.
But on a small screen, the nested div needs to appear to be above the parent div, as in this image.
I don't want to position the child element absolutely, because it's a very poor and inflexible choice, especially for a responsive page.
HTML for divs / CSS for divs (on a large screen only):
.container-div {
background-size: 100% auto;
margin-bottom: 20px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.child-div {
position: absolute;
border: 3px solid white;
width: 400px;
height: 200px;
margin-bottom: 10px;
margin-right: 10px;
bottom: 0;
}
<div class="container-div">
<div class="child-div">
...
</div>
</div>

Answer 1

Use an inner-parent and flexbox.
.parent {
display: flex;
flex-flow: column-reverse;
}
.inner-parent {
background: red;
}
.child {
background: blue;
}
#media screen and (min-width: 640px) {
.parent {
flex-flow: column;
background: red;
}
}
/* Reset and basic styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
align-items: center;
width: 200px;
}
.inner-parent {
height: 50px;
width: 100%;
padding: 20px;
text-align: center;
}
.child {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
height: 50px;
width: 75%;
}
<div class="parent">
<div class="inner-parent">PARENT</div>
<div class="child">CHILD</div>
</div>
When smaller than 640px use .inner-parent as the lower div and use the real parent when larger than 640px by making it's background color match. To fix the order just switch from column-reverse to column or just use order to change the order of just one of the child divs.