How to make a column stretch only on a certain breakpoint?

Question

I learned that I can make a column grow by giving it col class:

<div class="container">
  <div class="row">
    <div class="col">This will stretch</div>
    <div class="col-auto"></div>
  </div>
</div>

But what if I want this column to take the full width on small screens and stretch on the same row only on medium screens?

Answer 1

Use col-sm and col-sm-auto instead. Then the 2 columns will stack on mobile...

<div class="container">
  <div class="row">
    <div class="col-sm bg-info">This will stretch</div>
    <div class="col-sm-auto">|</div>
  </div>
</div>

https://www.codeply.com/go/KnA4Ivp9Aq