According to what i've understood when we are giving col-sm-n the columns in the row will arrange in the stack order when the device screen px is less than that specified by sm.Then what is row-sm,does it work similarly to col-sm?What is row-cols-sm-n.

Also when i used:

.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 got the output as responsive columns, but taking out the boxx class, my output just became stacks, that too random stacks. And when I changed row-sm to just row, I got columns but their responsiveness was bad. They went to the same bad stack form as earlier when I reduced the screen width. I am quite new to the bootstrap and flex concepts, so I am trying to understand the difference.

P.s:The code is part of a container class.

CodePudding user response：

.row-sm is not a standard class in Bootstrap 4.X or Bootstrap 5. I believe you're looking for .col-sm on the columns to make equal width on screen width great than sm breakpoint, stack less than sm breakpoint — reference https://getbootstrap.com/docs/4.6/layout/grid/#stacked-to-horizontal for documentation.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">
<div class="container">
    <div class="row mt-2 pt-5">
        <div class="col-sm bg-info">
            a
        </div>
        <div class="col-sm bg-danger">
            b
        </div>
        <div class="col-sm bg-primary">
            c
        </div>
    </div>
</div>