Как заставить столбец растягиваться только на определенную точку останова?

Question

Я узнал, что могу увеличить столбец, дав ему col класс:

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

Но что, если я хочу, чтобы этот столбец занимал полную ширину на маленьких экранах и растягивался в той же строке только на средних экранах?

Answer 1

Вместо этого используйте col-sm и col-sm-auto. Тогда 2 колонки будут складываться на мобильном телефоне ...

<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