Bootstrap 5 Layout: Column heights, responsive positions - bootstrap-5

Question

I'm trying to create the following layout:
When the page is smaller - the blue column should go under the red column.
No matter what I try - the issue is the red box always wants to be the same height as the blue box.
https://codepen.io/LeeBow/pen/eYKGzdb
<div class="container-fluid">
<div class="row">
<div class="col-md-8 order-md-1">
<div
style="height:100px;width:100px;background-color:red"></div>
</div>
<div class="col-md-4 order-md-3"><div style="height:300px;width:100px;background-color:blue"></div></div>
</div>
<div class="row">
<div class="col-md-4 order-md-2"><div style="height:100px;width:100px;background-color:green"></div></div>
</div>
</div>
I would like my green box to move under the red box.
The red box always stays the same height as the blue box. It moves under the red box correctly when the screen is smaller.
But the green box will not move under the red box.

Answer 1

Make two blue boxes:
one for desktop (use classes d-md-block d-none) and
one for mobile (use classes d-md-none d-block, which is the opposite from above).
Those classes are Bootstrap classes to manipulate display CSS property.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div style="height:100px;width:100%;background-color:red"></div>
<div class="d-md-none d-block" style="height:300px;width:100%;background-color:blue"></div> <!-- Show on mobile -->
<div style="height:100px;width:100%;background-color:green"></div>
</div>
<div class="col-md-4 d-md-block d-none">
<div style="height:300px;width:100%;background-color:blue"></div> <!-- Show on desktop -->
</div>
</div>
</div>