Hello there, I am trying to craft the front end of my website using Bootstrap 5.3. However, I am encountering an issue with the grid system. It seems like the classes are not behaving as they should be.
Below is the code I am using:
<div class="container">
<div class="row" style="height:500px;">
<div class="col-3 col-sm-12 bg-danger">
</div>
<div class="col-7 col-sm-8 bg-secondary"></div>
<div class="col-2 col-sm-4 bg-success"></div>
</div>
</div>
When I view this code on my screen (15.6 inch), it looks like the screenshot below: https://i.sstatic.net/75yb6.png
On a smaller screen, it appears like this: https://i.sstatic.net/f2Dif.png
As you can see, the "col-3", "col-7", and "col-2" classes are working on the small screen, while "col-sm-12", "col-sm-8", and "col-sm-4" are working on a larger screen. This is the opposite of what I expected. Can anyone explain why this is happening and offer a solution to fix it?