Gridbox CSS: Responsiveness / Float Main Section Left on XS - css

Question

I made an example in codepen:
Link: https://codepen.io/ScottFSchmidt/pen/gGVPrm
How do I get section B to float left on XS/mobile phone (sections A, C, D will hide). Getting all sections to "stack float left" would also work.
The problem seems to be that section A, C, & D are still "there" but hidden causing section B to "float right".
<div class="container-fluid wrapper">
<div class="box a hidden-sm hidden-xs"> <b><u>Definitions <br></b></u>
Grid-gap: provides an easy way for spacing our content <br>
Grid: generates a block-level grid <br>
Inline-grid: generates an inline-level grid<br>
Subgrid: Indicate that you want the sizes of its rows/columns to be taken from its parent rather than specifying its own.
</div>
<div class="box b">
<b><u>Conclusion <br></b></u>
Flexbox and Gridbox can be used together (with bootrap). <br>
Flexbox is best for single rows while Grixbox is best for "2 dimensions" <br>
Non-flexible measurements such as px can make boxes not appear on screen if the screen width is less than the px size. <br>
<br><b>Sources</b><br>https://css-tricks.com/snippets/css/complete-guide-grid/<br>
https://gridbyexample.com/examples/<br>
https://css-tricks.com/things-ive-learned-css-grid-layout/<br>
https://css-tricks.com/snippets/css/complete-guide-grid/<br>
https://www.w3schools.com/css/css_rwd_grid.asp<br>
</div>
<div class="box c hidden-sm hidden-xs"><b><u>What is flexbox? </b></u><br>
Flexbox is for one dimensional layout (row or column).
<br>"Flexbox is a single dimension – in a row OR a column." -Rachel Andrews <br>
Warning: Flexbox is NOT compatible with some IE verisions.
</div>
<div class="box d hidden-sm hidden-xs">
<b><u>What is gridbox? <br></b></u>
Grid is designed to be used with flexbox, not instead of it. CSS grid is for two dimensional layout. <br>"Grid is for layout of items in two dimensions – rows AND columns" - Rachel Andrews.
</div>
</div>
If you -1 please explain why for better posting in future as I am new to forms.
Thanks!

Answer 1

You can do that using flex. Check the code below.
.container {
display: flex;
flex-direction: column;
}
.left{
order: 2;
}
.right {
order: 1;
}
.container > div {
flex: 1;
}
.container img {
width: 100%;
display: block
}
.innerBottom {
display: flex;
flex-direction: column
}
#media(min-width: 768px){
.container {
flex-direction: row;
}
.innerBottom {
flex-direction: row
}
.left{
order: 1;
}
.right {
order: 2;
}
}
<div class="container">
<div class="right">
<img src="http://www.placehold.it/600x200/cccccc?text=Right">
</div>
<div class="left">
<div>
<img src="http://www.placehold.it/1200x200/cc0000?text=Left">
</div>
<div class="innerBottom">
<div>
<img src="http://www.placehold.it/600x200/azazaz?text=LeftBottomLeft">
</div>
<div>
<img src="http://www.placehold.it/600x200/ddd?text=LeftBottomRight">
</div>
</div>
</div>
</div>