From my understanding, when using col-sm-n in Bootstrap, the columns in a row will stack on top of each other when the device screen width is less than the specified size for sm. But what about row-sm? Does it function similarly to col-sm? And what exactly is row-cols-sm-n?
When I tried this code:
.boxx{
display:flex
}
<div class="row-sm mt-2 pt-5 m-5 boxx">
<div class="col-sm-3 small-box py-5 ml-3 mt-2 ">a</div>
<div class="col-sm-3 small-box py-5 ml-5 mt-2 ">b</div>
<div class="col-sm-3 small-box py-5 ml-5 mt-2 ">c</div>
</div>
I observed that the output was responsive columns. However, after removing the boxx class, the output became random stacks. Changing row-sm to just row resulted in columns but with poor responsiveness - they ended up stacking poorly when the screen width decreased. As someone new to Bootstrap and flex concepts, I'm trying to grasp the distinctions.
P.S: This code snippet is part of a container class.