Is there a way to make Bootsrap (5) columns stack on small, but flex on medium and up?

Question

I have set of columns I'm adding dynamically (could be 2, could be up to 5). I want these to stack vertically on small screens (.col-sm-12) but display horizontally on medium and up screens.

However, if I do something like the below the columns still all inherit col-sm-12.

<div class="row">
 <div class="col col-sm-12">content</div>
 <div class="col col-sm-12">content</div>
 <div class="col col-sm-12">content</div>
 <div class="col col-sm-12">content</div>
</div>

Is there a way to do this so the columns are 100% width on small, but flex on other screen sizes?

Answer 1

Simply use col-md...

Demo

<div class="row">
    <div class="col-md">content</div>
    <div class="col-md">content</div>
    <div class="col-md">content</div>
    <div class="col-md">content</div>
</div>

As explained in the docs the auto-layout columns are responsive. Therefore you can simply set the md breakpoint and below md will stack vertically.

Another option would be to use row columns

   <div class="row row-cols-1 row-cols-md-4">
        <div class="col">content</div>
        <div class="col">content</div>
        <div class="col">content</div>
        <div class="col">content</div>
   </div>

Answer 2

Here in bootstrap we are using 12 column grid system. That means partitioning the container(or in the sense, - the place where contents are stored) into 12 vertical columns. Here you used col-sm-12 and col

col-sm-12 : means your content or div will span the entire width of div in small screens and above(unless if it's mentioned explicitly).

col : if simply put col these divs will stack horizontally by taking equal widths, and resize the size according to the screen size, but no matter they won’t stack vertically.

you can see more details regarding grid system here in bootstrap documentation

for you to achive what you want, you can use something like this

             <div class="row">
              <div class="col-12 col-md">content</div>
              <div class="col-12 col-md">content</div>
              <div class="col-12 col-md">content</div>
              <div class="col-12 col-md">content</div>
             </div>

if these are the classes, above medium sized screens columns will span horizontally with variable size, and below that they will take whole 12 column width. if you want some more clarification regarding grid system classes in bootstrap you can refer this SO answer also.