Статья, в которой разберём сетку Bootstrap 4, которая используется для создания адаптивных макетов сайтов.

Bootstrap 4 - Сетка

Назначение сетки

Сетка фреймворка Bootstrap 4 предназначена для создания адаптивных макетов сайта.

В основу сетки Bootstrap 4 положены CSS Flexbox и медиа запросы (CSS media queries). Их изучение позволит вам более подробно разобраться с тем, как работает сетка Bootstrap 4.

Адаптивный макет – это такой макет, вид которого может изменяться в зависимости от того, какую ширину основной области (viewport) имеет браузер. Это означает, что при одних значениях ширины viewport адаптивный макет может выглядеть одним образом, а при иных – совершенно по-другому.

В Bootstrap 4 изменения вида макета реализовано посредством медиа запросов. Каждый медиа запрос в Bootstrap строится на основании минимальной ширины viewport браузера (breakpoint, контрольной точки, названии устройства).

Контрольные точки (названия устройств) сетки Bootstrap 4
Контрольные точки (названия устройств) сетки Bootstrap 4

Фреймворк Bootstrap 4 имеет 5 контрольных точек или названий устройств (без обозначения, sm, md, lg, xl), и, следовательно, позволяет создать макет, который на каждой из них может выглядеть по-разному.

Ширина viewport браузера Контрольная точка (название устройства)
>=0 без обозначения (xs)
>=576px sm
>=768px md
>=992px lg
>=1200px xl

В Bootstrap 4 по сравнению с Bootstrap 3 изменено количество контрольных точек. В Bootstrap 3 их было четыре: xs, sm, md и lg.

Элементы сетки

Сетка Bootstrap 4 состоит из следующих элементов:

  • Обёрточные контейнеры (container и container-fluid);
  • Ряды (row);
  • Адаптивные блоки (col).

Обёрточные контейнеры

Обёрточный контейнер - это элемент сетки Bootstrap 4, с которого начинается создание адаптивного макета страницы или некоторого блока. Другие элементы сетки (ряды и адаптивные блоки) должны быть размещены внутри него.

Bootstrap 4 - Обёрточный контейнер
Bootstrap 4 - Обёрточный контейнер

В Bootstrap 4 имеются 2 вида обёрточных контейнеров: адаптивно-фиксированный и адаптивно-резиновый.

HTML-разметка адаптивно-фиксированного контейнера:

<div class="container">...</div>  

HTML-разметка адаптивно-резинового контейнера:

<div class="container-fluid">...</div>  

Первый (адаптивно-фиксированный) контейнер используется тогда, когда необходимо создать макет с шириной, которая должна оставаться постоянной в пределах определённой ширины области просмотра (viewport) браузера.

Bootstrap 4 - Ширина адаптивно-фиксированного контейнера (container)
Bootstrap 4 - Ширина адаптивно-фиксированного контейнера (container)

Зависимость ширины адаптивно-фиксированного контейнера от ширины viewport браузера приведена в таблице:

Ширина viewport браузера Контрольная точка (название устройства) Ширина адаптивно-фиксированного контейнера (container)
>=0 без обозначения (xs) 100%
>=576px sm 540px
>=768px md 720px
>=992px lg 960px
>=1200px xl 1140px

Это означает, что адаптивно-фиксированный контейнер будет иметь:

  • 100% ширину при ширине viewport до 576px;
  • 540px при ширине viewport от 576 до 768px;
  • 720px при ширине viewport от 768 до 992px и т.д

В горизонтальном направлении фиксированный-адаптивный контейнер позиционируется по центру, это осуществляется в bootstrap.css посредством CSS свойств margin-left: auto и margin-right: auto.

Второй (адаптивно-резиновый) контейнер применяется тогда, когда вам необходимо создать полностью гибкий макет страницы или некоторого блока. Данный контейнер имеет 100% ширину при любой ширине viewport.

Bootstrap 4 - Ширина адаптивно-резинового контейнера (container)
Bootstrap 4 - Ширина адаптивно-резинового контейнера (container)
Ширина viewport браузера Контрольная точка (название устройства) Ширина адаптивно-резинового контейнера (container-fluid)
>=0 без обозначения (xs) 100%
>=576px sm
>=768px md
>=992px lg
>=1200px xl

Кроме этого обёрточные контейнеры (container и container-fluid) имеют ещё внутренние отступы (padding) слева и справа по 15px. Установка внутренних отступов обёрточным контейнерам осуществляется в CSS файле Bootstrap 4 с помощью свойств padding-left: 15px и padding-right: 15px.

При создании макета с помощью сетки Bootstrap 4 не помещайте одни обёрточные контейнеры внутри других.

Ряды

Ряд – это специальный элемент сетки (row), который используется при создании макета в следующих случаях:

  • между контейнером и адаптивными блоками, которые надо в него поместить;
  • между одним и другими адаптивными блоками, которые надо поместить в первый адаптивный блок.
Bootstrap 4 - Ряд (row)
Bootstrap 4 - Ряд (row)

HTML-разметка ряда:

<div class="row">...</div>  

В отличие от Bootstrap 3, в которой ряд выступал только для компенсации левых и правых внутренних padding полей обёрточных контейнеров или адаптивных блоков, в Bootstrap 4 он играет очень важную роль. Это связано с тем, что данная сетка построена на CSS Flexbox. В этой сетки он выступает в роли flex-контейнера для flex-элементов (адаптивных блоков). Т.е. если вы будете использовать адаптивные блоки вне ряда, они работать не будут. В Bootstrap 4 адаптивные блоки должны обязательно находиться в блоке с классом row.

Компенсация внутренних padding полей осуществляется так же как и в Bootstrap 3, за счёт отрицательных левых и правых внешних отступов, равных 15px (margin-left:-15px и margin-right:-15px).

Пример того, как происходит компенсация padding полей:

<!-- 1 пример -->
container (+15px) -> row (-15px) -> col (+15px) -> контент
<!-- 2 пример -->
container-fluid (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент

В итоге отступ от левого и правого краёв обёрточного контейнера до контента всегда будет составлять 15px.

Кроме этого адаптивные блоки логически не связанные между собой не обязательно помещать в один ряд в рамках какого-то обёрточного контейнера или другого адаптивного блока. Наиболее корректно их разбить на отдельные логические группы и поместить каждую из них в отдельный ряд (row).

Например:

<div class="container">
    <!-- Контент разбит на 2 row -->
    <div class="row">
        <div class="col-6">...</div>
        <div class="col-6">
            <!-- Контент разбит на 3 row -->
            <div class="row">…</div>
            <div class="row">…</div> 
            <div class="row">…</div>
        </div>
    <div class="row">...</div>
</div>

Адаптивные блоки

Адаптивные блоки – это основные строительные элементы адаптивного макета, именно от них будет зависеть, как будет выглядеть макет веб-страницы на разных контрольных точках (без обозначения, sm, md, lg и xl).

Bootstrap 4 - Адаптивные блоки (col)
Bootstrap 4 - Адаптивные блоки (col)

Создаётся адаптивный блок очень просто: с помощью добавления одного или нескольких классов col-?-? к необходимому HTML элементу.

В классе вместо первого знака вопроса указывается название контрольной точки: без обозначения, sm, md, lg или xl. Вместо второго знака вопроса указывается ширина адаптивного блока, которую он должен иметь на указанной контрольной точке. Ширина адаптивного блока задаётся в относительной форме с помощью числа от 1 до 12 (колонок Bootstrap).

Данное число определяет, какую часть ширины будет занимать адаптивный блок на указанной контрольной точке от ширины родительского блока, т.е. ряда. Ширина ряда в числовом выражении (колонках Bootstrap) равна 12.

Например, блок с классом col-md-4 на контрольной точке md будет занимать 4/12 ширины ряда, т.е. 33,3% (т.е. 4/12*100% = 33.3%).

Ширина viewport Контрольная точка Класс Ширина адаптивного блока
Крохотная ширина (>=0) без обозначения (xs) col-? от col-1 до col-12
Маленькая ширина (>=576px) sm col-sm-? от col-sm-1 до col-sm-12
Средняя ширина (>=768px) md col-md-? от col-md-1 до col-md-12
Большая ширина (>=992px) lg col-lg-? от col-lg-1 до col-lg-12
Очень большая ширина (>=1200px) xl col-xl-? от col-xl-1 до col-xl-12

Адаптивные блоки, также как и контейнеры имеют внутренние отступы слева и справа по 15px. Данные отступы у адаптивных блоков фреймворка Bootstrap 4 устанавливаются с помощью CSS свойств padding-left: 15px и padding-right: 15px.

Размещать адаптивные блоки необходимо в ряду. Т.е. у любого адаптивного блока в качестве родителя должен быть блок с классом row.

Например, рассмотрим, какую ширину на каждом устройстве будет иметь следующий адаптивный блок:

<div class="row">
    <!--Адаптивный блок Bootstrap-->
    <div class="col-12 col-sm-9 col-md-7 col-lg-5 col-xl-3">
      ...
    </div>
</div>

Данный адаптивный блок будет иметь:

  • до sm (на xs) ширину, равную 12 колонкам Bootstrap (т.е. 12/12*100%=100% от ширины ряда);
  • на устройстве sm ширину, равную 9 колонкам Bootstrap (т.е. 9/12*100%=75% от ширины ряда);
  • на устройстве md ширину, равную 7 колонкам Bootstrap (т.е. 7/12*100%=58,3% от ширины ряда);
  • на устройстве lg ширину, равную 5 колонок Bootstrap (т.е. 5/12*100%=41,6% от ширины ряда);
  • на устройстве xl ширину, равную 3 колонкам Bootstrap (т.е. 3/12*100%=25% от ширины ряда).

Кроме этого при указании ширины адаптивному блоку для какой-то контрольной точки, она будет распространяться не только на эту точку, но и на все следующие, если они не заданы.

Примеры:

  1. Адаптивный блок <div class="col-12 col-sm-6 col-xl-3"> на устройствах md и lg будет иметь ширину, равную 6 колонкам Bootstrap: (12) -> sm(6) -> md -> lg -> xl(3).
  2. Адаптивный блок <div class="col-8 col-md-4"> на устройстве sm будет иметь ширину, равную 8 колонкам Bootstrap, а на устройствах lg и xl - ширину, равную 4 колонкам Bootstrap: (8) -> sm -> md(4) -> lg -> xl.
  3. Адаптивный блок <div class="col-6"> на всех устройствах будет иметь ширину, равную 6 колонкам Bootstrap: (6) -> sm -> md -> lg -> xl.

Адаптивные блоки без колонок

В сетку Bootstrap 4 добавлены специальные классы col, col-sm, col-md, col-lg, col-xl, col-auto, col-sm-auto, col-md-auto, col-lg-auto и col-xl-auto.

Первая группа классов (col, col-sm, col-md, col-lg, col-xl) предназначена для создания адаптивных блоков, ширина которых будет зависеть от свободного пространства линии. Распределение не занятой ширины (свободного пространства) линии между всеми такими блоками осуществляется равномерно. Кроме этого данные адаптивные блоки перед распределением свободного пространства линии (по умолчанию) имеют нулевую ширину.

Рассмотрим несколько примеров.

1. Создание в ряду 5 адаптивных блоков с одинаковой шириной.

<div class="row">
    <div class="col"> 1/5 </div>
    <div class="col"> 2/5 </div>
    <div class="col"> 3/5 </div>
    <div class="col"> 4/5 </div>
    <div class="col"> 5/5 </div>
</div>

Расчёт ширины:

  • свободное пространство линии - 100% (т.к. их ширина равна 0);
  • ширина каждого адаптивного блока - 20% (100%/5);

2. Ширина блоков с классом col при наличии в линии адаптивного блока с количеством колонок.

<div class="row">
    <div class="col"> ? </div>
    <div class="col-7"> 7 колонок </div>
    <div class="col"> ? </div>
    <div class="col"> ? </div>
</div>

Расчёт ширины:

  • свободное пространство линии - 41,67% ((12-7)/12*100%);
  • ширина каждого адаптивного блока, кроме col-7 - 13,89% (41,67%/3).

В некоторых версиях браузерах Safari есть ошибка при использовании такой разметки, она может быть разбита на несколько линий.

Исправить это можно 2 способами:

  • посредством установки адаптивным блокам границы
    .col { border: 1px solid transparent; }
    
  • с помощью задания адаптивным блокам CSS-свойства flex-basis
    .col { flex: 1 0 20%; }

Кроме этого, сетка Bootstrap 4 позволяет располагать адаптивные блоки без указания количества колонок на нескольких линиях.

<div class="row">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="w-100"></div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Данное действие осуществляется посредством добавления в разметку перед адаптивным блоком, который должен начинаться с новой линии, пустого div элемента с классом w-100.

Если данное действие необходимо использовать только для некоторых контрольных точек, то к нему (классу w-100) дополнительно нужно ещё добавить служебные отзывчивые классы Bootstrap 4.

В этом примере переноситься на новую линию адаптивные блоки будут только на устройствах, имеющих крохотный или маленький viewport.

<div class="row">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="d-block d-md-none w-100"></div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Вторая группа классов (col-auto, col-sm-auto, col-md-auto, col-lg-auto и col-xl-auto) предназначена для создания адаптивных блоков, ширина которых будет определяться в соответствии с их содержимым.

Например:

<div class="row">
  <div class="col"> (1) </div>
  <div class="col-md-auto"> (2) - ширина на контрольных точках md, lg и xl будет определяться на основании содержимого</div>
  <div class="col col-lg-2"> (3) </div>
</div>

В результате:

  • на xs и sm адаптивные блоки будут располагаться вертикально (один под другим) и занимать всю ширину ряда;
  • на md адаптивный блок 2 будет иметь ширину, необходимую для отображения своего содержимого; если блок 2 не будет занимать всю ширину ряда, то адаптивные блоки 1 и 3 поделят его между собой поровну; если же блок 2 будет занимать всю ширину линии, то картина будет такая же, как на контрольных точках xs и sm;
  • на lg и xl адаптивный блок 2 будет иметь ширину, необходимую для отображения своего содержимого; если блок 2 не будет занимать всю ширину ряда, то блок 3 будет занимать ширину, равную 2 колонкам Bootstrap, а блок 1 - всю оставшуюся ширину ряда; если блок 2 будет занимать всю ширину ряда, то разметка будет такая же, как на xs и sm, только 3 блок на 3 линии будет иметь ширину, равную 2 колонкам Bootstrap.

Расположение адаптивных блоков в ряду

Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12. Адаптивные блоки, которые не помещаются в текущую линию переходят на следующую.

Bootstrap 4 - Расположение адаптивных блоков в ряду
Bootstrap 4 - Расположение адаптивных блоков в ряду
<div class="container">
  <div class="row">
    <div class="col-6"> (1) </div>
    <div class="col-6"> (2) </div>
    <div class="col-12"> (3) </div>
    <div class="col-8"> (4) </div>
  </div>
</div>

Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на sm-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs и md-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs, sm и lg-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
</div>

Основной принцип верстки макета

Основной принцип верстки макета веб-страницы на сетке Bootstrap 4 заключается во вкладывании одних адаптивных блоков в другие.

При этом ширина адаптивных блоков это всегда относительная величина, которая задаётся в колонках Bootstrap и зависит только от ширины родителя, т.е. ряда.

Размещать контент веб-страницы следует только в адаптивных блоках.

Например, в имеющийся макет, а именно в адаптивный блок col-8 вложим ещё 2 блока:

<div class="container">
    <div class="row">
        <div class=col-8>...</div>
        <div class=col-4>...</div>
    </div>    
</div>

Для этого предварительно необходимо в блок col-8 положить ряд (контейнер для адаптивных блоков):

<div class="container">
    <div class="row">
        <div class=col-8>
            <div class="row">...</div>
        <div class=col-4>...</div>
    </div>    
</div>
Bootstrap 4 - Вставка ряда в содержимое адаптивного блока col-8
Bootstrap 4 - Вставка ряда в содержимое адаптивного блока col-8

После этого добавим 2 адаптивных блока в ряд:

<div class="container">
    <div class="row">
        <div class=col-8>
            <div class="row">
                <div class=col-6>...</div>
                <div class=col-6>...</div>
            </div>
        <div class=col-4>...</div>
    </div>    
</div>
Bootstrap 4 - Вставка адаптивных блоков в ряд
Bootstrap 4 - Вставка адаптивных блоков в ряд

Выравнивание адаптивных блоков

Выравнивания адаптивных блоков в горизонтальном и вертикальном направлении осуществляется в Bootstrap 4 с помощью служебных flex-классов.

Вертикальное выравнивание адаптивных блоков

Выравнивание адаптивных блоков в пределах линии ряда по вертикали осуществляется посредством одного из следующих классов, который необходимо дополнительно добавить к row:

  • align-items-start (относительно начала линии);
  • align-items-center (по центру);
  • align-items-end (относительно конца).

Например, выровняем все адаптивные блоки по центру линии ряда:

<div class="row align-items-center">
    <div class="col"> 1/2 </div>
    <div class="col"> 2/2 </div>
</div>

По умолчанию адаптивные элементы занимают всю высоту линии ряда, в которой они расположены.

Выравнивание какого-то определённого адаптивного блока по вертикали в пределах линии может осуществляться одним из следующих классов:

  • align-self-start (относительно начала линии);
  • align-self-center (по центру);
  • align-self-end (относительно конца).

Данные классы необходимо добавлять к адаптивным блокам, а не к ряду.

Например, выравниваем адаптивный блок 2 по нижнему краю линии:

<div class="row align-items-center">
    <div class="col"> (1) </div>
    <div class="col align-self-end"> (2) </div>
</div>

Горизонтальное выравнивание адаптивных блоков

Для выравнивания адаптивных блоков в горизонтальном направлении предназначены следующие классы:

  • justify-content-start (относительно начала линии ряда - по умолчанию);
  • justify-content-center (по центру);
  • justify-content-end (относительно конца линии);
  • justify-content-around (равномерно, с учётом пространства перед первым и последним адаптивным блоком);
  • justify-content-between (равномерно, с одинаковым пространством между адаптивными блоками).

Например, распределим адаптивные блоки в горизонтальном направлении равномерно:

<div class="row justify-content-around">
    <div class="col-4"> (1) </div>
    <div class="col-4"> (2) </div>
</div>

Адаптивная разметка без полей

Внутренние поля (padding) адаптивных блоков и внешние отрицательные отступы (margin) рядов можно убрать, если к последним (т.е. к row) добавить класс no-gutters.

<div class="row no-gutters">
    <div class="col-6">
      <!-- На этот блок row и на его адаптивные блоки это свойство уже не распространится -->
      <div class="row">
        <div class=col-8>...</div>
        <div class=col-4>...</div>
      </div>
    </div>    
    <div class="col-6">...</div>
</div>

Обратите внимание, что данный класс (no-gutters) действует только на адаптивные блоки, которые непосредственно размещены в этом ряду. Т.е. на адаптивные блоки, которые не имеют в качестве родителя данный ряд, CSS свойства по убиранию padding не распространятся.

Смещение адаптивных блоков

В Bootstrap 4 смещение адаптивных блоков можно выполнить с помощью:

  • классов offset (на определённое количество колонок);
  • служебных (утилитных) margin классов.

Классы offset

Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок.

Данные классы имеют следующий синтаксис:

оffset-{1} или offset-{breakpoint}-{1}

{breakpoint} – контрольная точка, начиная с которой к данному блоку будет применено смещение (если она не указана, то смещение будет применено, начиная с самых крохотных устройств).

{2} – величина смещения, указываемая с помощью количества колонок Bootstrap.

В качестве примера установим смещение адаптивным блокам так, как это показано на рисунке.

Bootstrap - Смещение адаптивных блоков с помощью классов offset
<div class="row">
  <div class="col-4"> (1) </div>
  <div class="col-4 offset-4"> (2) </div>
</div>
<div class="row">
  <div class="col-3 offset-3"> (1) </div>
  <div class="col-3 offset-3"> (2) </div>
</div>
<div class="row">
  <div class="col-6 offset-3"> (1) </div>
</div>  

Смещение с помощью margin классов

В четвертой версии Bootstrap устанавливать смещение адаптивным блокам также можно с помощью margin отступов (margin-left: auto и (или) margin-right: auto). Эта вариант смещения появился благодаря тому, что сетка в новой версии Bootstrap (4) основывается на CSS Flexbox.

Данный вариант смещения (с помощью margin классов) используют, когда блоки необходимо сместить относительно друг от друга не которую переменную величину.

В Bootstrap 4 для более удобного и адаптивного задания блокам margin отступов (margin-left: auto и (или) margin-right: auto) можно использовать классы ml-auto, mr-auto, ml-{breakpoint}-auto и mr-{breakpoint}-auto.

Bootstrap 4 - Смещение адаптивных блоков
Смещение адаптивных блоков
<div class="row">
  <div class="col-4"> (1) </div>
  <div class="col-4 ml-auto"> (2) </div>
</div>
<div class="row">
  <div class="col-3"> (1) </div>
  <div class="col-3 ml-auto mr-auto"> (2) </div>
  <div class="col-3"> (3)</div>
</div>
<div class="row">
  <div class="col-4 ml-auto mr-auto"> (1) </div>
  <div class="col-4 ml-auto mr-auto"> (2) </div>
</div>  

Изменение визуального порядка следования адаптивных блоков

По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде.

Изменить визуальный порядок следования адаптивного блока в Bootstrap 4 выполняется посредством класса order-{visual_number}. Этот класс предназначен для контрольной точки xs. Если порядок элемента нужно определить не для контрольной точки xs, а для sm, md, lg или xl, то используется следующий вариант данного класса:

order-{breakpoint}-{visual_number}

Вместо {visual_number} необходимо указать число от 1 до 12.

Это число и определяет то, как элементы будут визуально следовать на странице. А именно все адаптивные элементы будут визуально следовать в порядке возрастания этих номеров. Если элементу не установлен класс order, то по умолчанию он имеет значение 0.

Например, изменим порядок следования двух адаптивных блоков:

<div class="row">
  <div class="col">
    Первый (не упорядоченный, без класса order-)
    <!-- По умолчанию order, равно 0, поэтому он и первый-->
  </div>
  <div class="col order-12">
    Второй, но будет отображаться последним
  </div>
  <div class="col order-1">
    Третий, но будет отображаться вторым
  </div>
</div>

Ещё один пример (с использованием адаптивных классов order):

<div class="row">
  <div class="col-md-8 order-2 order-md-1">
    Первый (на xs, sm будет отображаться вторым)
  </div>
  <div class="col-md-4 order-1 order-md-2">
    Второй (на xs, sm будет отображаться первым)
  </div>
</div>

Кроме чисел (по умолчанию от 1 до 12) можно ещё использовать слова first и last. Эти классы (order-first, order-{breakpoint}-first, order-last, order-{breakpoint}-last) позволяют соответственно визуально сместить элемент в начало или конец.

Классы order-first и order-{breakpoint}-first оказывают своё действие посредством установки элементу CSS свойства order со значением -1 (order: -1), а классы order-last и order-{breakpoint}-last - CSS свойства order со значением 13 (order: $columns + 1).

Перепишем вышеприведённый пример с использованием классов order, в которых используются ключевые слова first и last:

<div class="row">
  <div class="col-md-8 order-last order-md-first">
    Первый (на xs, sm будет отображаться последним)
  </div>
  <div class="col-md-4 order-first order-md-last">
    Последний (на xs, sm будет отображаться первым)
  </div>
</div>

Пример с использованием классов order как с числом, так и со словами first и last:

<div class="row">
  <div class="col-3 order-sm-last order-md-1">#1 (XS), #LAST (SM), #1 (MD, LG и XL)</div>
  <div class="col-3 order-md-7">#2 (XS), #7 (MD, LG и XL)</div>
  <div class="col-3 order-md-6">#3 (XS), #6 (MD, LG и XL)</div>
  <div class="col-3 order-md-5">#4 (XS), #5 (MD, LG и XL)</div>
  <div class="col-3 order-md-4">#5 (XS), #4 (MD, LG и XL)</div>
  <div class="col-3 order-md-3">#6 (XS), #3 (MD, LG и XL)</div>
  <div class="col-3 order-md-2">#7 (XS), #2 (MD, LG и XL)</div>
  <div class="col-3 order-sm-first order-md-8">#8 (XS), #FIRST (SM), #8 (MD, LG и XL)</div>
</div>

Пример адаптивной вёрстки на сетке Boostrap 4

Создадим адаптивную разметку блока веб-страницы, приведённого на рисунке, с помощью сетки Bootstrap 4.

Bootstrap 4 - Пример адаптивной разметки блока
Bootstrap 4 - Пример адаптивной разметки блока

1. Создаём разметку блока для мобильных устройств (xs).

<div class="row">
    <div class="col-12"> (1) </div>
    <div class="col-12"> (2) </div>
    <div class="col-12"> (3) </div>
    <div class="col-12"> (4) </div>
    <div class="col-12"> (5) </div>
</div>

2. Настраиваем разметку для контрольной точки sm:

<div class="row">
    <div class="col-12 col-sm-6"> (1) </div>
    <div class="col-12 col-sm-6"> (2) </div>
    <div class="col-12 col-sm-6"> (3) </div>
    <div class="col-12 col-sm-6"> (4) </div>
    <div class="col-12 col-sm-12"> (5) </div>
</div>

3. Устанавливаем блокам количество колонок, которые они должны иметь на устройствах md и lg:

<div class="row">
    <div class="col-12 col-sm-6 col-md-4"> (1) </div>
    <div class="col-12 col-sm-6 col-md-4"> (2) </div>
    <div class="col-12 col-sm-6 col-md-4"> (3) </div>
    <div class="col-12 col-sm-6 col-md-6"> (4) </div>
    <div class="col-12 col-sm-12 col-md-6"> (5) </div>
</div>

4. Создаём разметку для xl:

<div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-xl"> (1) </div>
    <div class="col-12 col-sm-6 col-md-4 col-xl"> (2) </div>
    <div class="col-12 col-sm-6 col-md-4 col-xl"> (3) </div>
    <div class="col-12 col-sm-6 col-md-6 col-xl"> (4) </div>
    <div class="col-12 col-sm-12 col-md-6 col-xl"> (5) </div>
</div>

Убираем ненужные контрольные точки у адаптивных блоков:

<div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-xl"> (1) </div>
    <div class="col-12 col-sm-6 col-md-4 col-xl"> (2) </div>
    <div class="col-12 col-sm-6 col-md-4 col-xl"> (3) </div>
    <div class="col-12 col-sm-6 col-xl"> (4) </div>
    <div class="col-sm-12 col-md-6 col-xl"> (5) </div>
</div>

Кроме этого, изначально в Bootstrap 4 адаптивный блок имеет ширину, равную 100%. Это позволяет при создании адаптивных блоков не указывать количество колонок, если их первоначальная ширина должна быть равна 12 колонок (100%).

<div class="row">
    <div class="col-sm-6 col-md-4 col-xl"> (1) </div>
    <div class="col-sm-6 col-md-4 col-xl"> (2) </div>
    <div class="col-sm-6 col-md-4 col-xl"> (3) </div>
    <div class="col-sm-6 col-xl"> (4) </div>
    <div class="col-md-6 col-xl"> (5) </div>
</div>