Bootstrap 4 - col с col-sm-12 не реагирует

Question

Я использую bootstrap 4 и мои 4 столбца в 1 строке.Когда я перехожу на мобильник, я хочу, чтобы 4 столбца стали 1 столбцом (по сути, добавьте строку на столбец.)

Насколько я понимаю, если я добавлю col-sm-12 к своим элементам div, это будет делать то, что я хочуНо это не работает.Чего мне не хватает?

<div class="col col-sm-12">
<div>Required Forms</div>
<p>View what forms are required for shipping to the event.</p>
</div>
<!-- col -->

<div class="col col-sm-12">
<div>Invoice Instructions</div>
<p>Instructions on how to complete the commercial invoice form.</p>
</div>
<!-- col -->

<div class="col col-sm-12">
<div>Labeling &amp; Packing</div>
<p>Tips on packing and labeling your shipment.</p>
</div>
<!-- col -->

<div class="col col-sm-12">
<div>Wood Packing</div>
<p>Important information on wood packings (includes skids / pallets)</p>
</div>
<!-- col -->
</div>
<!-- row -->

Answer 1

Для мобильных устройств, таких как смартфоны, вы должны использовать класс точек останова наименьшего размера, который равен col-*, классы col-sm-* предназначены для экранов немного большего размера (например, для телефонов с альбомной ориентацией).

Вы можетепроверьте пределы чувствительной точки останова в Документах начальной загрузки

ПРИМЕЧАНИЕ: Также имейте в виду, что классы col-* будут применяться к указанной точке останова, поэтому если вы простоиспользуйте col-12, тогда элемент будет использовать полное с на всех экранах. Если вы хотите, чтобы это изменилось, вы должны установить другой класс для более крупных устройств, таких как col-md-4, поэтому элемент использует только 4 столбца на экранах планшетов.

.col {
  border: 1px solid #000;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col col-12 col-sm-6 col-md-3">
    <div>Required Forms</div>
    <p>View what forms are required for shipping to the event.</p>
  </div>
  <!-- col -->

  <div class="col col-12 col-sm-6 col-md-3">
    <div>Invoice Instructions</div>
    <p>Instructions on how to complete the commercial invoice form.</p>
  </div>
  <!-- col -->

  <div class="col col-12 col-sm-6 col-md-3">
    <div>Labeling &amp; Packing</div>
    <p>Tips on packing and labeling your shipment.</p>
  </div>
  <!-- col -->

  <div class="col col-12 col-sm-6 col-md-3">
    <div>Wood Packing</div>
    <p>Important information on wood packings (includes skids / pallets)</p>
  </div>
  <!-- col -->
</div>
<!-- row -->