bootstrap right block over left block on mobile view - html

Question

I have 2 blocks using bootstrap grid system.
On mobile view, I want the right block above the left one. The right block should also occupy 100% width of the screen.
My code so far:
<style>
.block {
border-radius: 8px;
box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
padding: 25px;
}
.block2 {
border-radius: 8px;
box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
}
</style>
<div class="container checkoutform">
<form class="row mx-n2">
<div class="col-sm-8 px-2">
<div class="block">
<!-- code -->
</div>
</div>
<div class="col-sm-4 px-2">
<div class="block2">
<!-- code -->
</div>
</div>
</form>
</div>
I have no idea how to proceed. Any help would be greatly appreciated

Answer 1

Try adding width: 100%; to the .block2 and .block style rules.
As well, try to switch the places of the block and block2 div elements.
It should be looking like that:
The CSS:
.block {
border-radius: 8px;
box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
padding: 25px;
width: 100%;
}
.block2 {
border-radius: 8px;
box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
width: 100%;
}
And the HTML:
<div class="container checkoutform">
<form class="row mx-n2">
<div class="col-sm-8 px-2">
<div class="col-sm-4 px-2">
<div class="block2">
<!-- code -->
</div>
</div>
<div class="col-sm-8 px-2">
<div class="block">
<!-- code -->
</div>
</div>
</form>
</div>
Please let me know if it worked!