I am looking to rearrange the cards in a specific order on breakpoint -md. Please refer to the image below for reference.
https://i.sstatic.net/UXABN.png
The goal is clarified in the image above. I would prefer if this can be achieved using bootstrap and minimal CSS.
Everything is developed using BS5.
Current CODE:
.scroll_card_expense {
overflow-y: scroll;
height: 700px;
}
.payee_card {
overflow-y: scroll;
max-height: 465px;
}
.col_height {
max-height: 800px;
}<div class="container px-3">
<div class="row flex-md-row-reverse py-3">
<div class="col-md-6 col_height">
<!-- LIGHT BLUE CARD-->
<div class="order-md-1 card my-2">
<div class="card-body">
...
</div>
</div>
<!-- LIGHT BLUE CARD-->
<!-- DARK BLUE CARD-->
<div class="order-md-1 card my-2">
<div class="card-body">
...
</div>
</div>
<!-- DARK BLUE CARD-->
<!-- GREEN CARD-->
<div class="order-md-1 card my-2">
<div class="card-body">
...
</div>
</div>
<!-- GREEN CARD-->
</div>
<div class="col-md-6 col_height">
<!-- YELLOW CARD-->
<div class="order-md-3 card my-2">
<div class="card-body scroll_card_expense">
...
</div>
</div>
<!-- YELLOW CARD-->
</div>
</div>Thank you.