Bootstrap 4 - Система сеток

Статья о системе сеток, которая используется в Twitter Bootstrap 4. Её особенность и основные компоненты: контейнеры, ряды и адаптивные блоки. Создание адаптивной разметки за 5 шагов.

Внимание: В Twitter Bootstrap 4 вместо px, которые применялись в Twitter Bootstrap 3, теперь используются единицы измерения em и rem.

Единица измерения rem (root em) является основной CSS единицей для задания размеров. 1rem равен размеру шрифта, который установлен для элемента html, т.е. для всего документа. Данная единица измерения является относительной, т.к. она зависит от размера шрифта, который установлен для всего документа.

По умолчанию в Twitter Bootstrap 4 для всего документа установлен размер шрифта, равный 16px.

html {
  font-size:16px;
}

В этом случае 1rem = 16px.

Но данный размер можно переопределить, т.е. изменить его. Если например для элемента html установить размер шрифта 14px, то 1rem = 14px.

Например, перевести размер 34rem в пиксели (px). Для этого данное значение необходимо умножить на размер шрифта, установленный для элемента html: 34rem*16=544px.

Например, перевести размер 544px в rem. Для этого данное значение необходимо разделить на размер шрифта, установленный для элемента html: 544px/16=34rem.

Единица измерения em - это ещё одна относительная единица, которая применяется в Twitter Bootstrap 4. Она используется в CSS для запросов media. Её основное отличие от rem в том, что её базовой размер берётся не от размера шрифта корневого элемента html, а от родительского элемента.

Например, перевести размер 28em некоторого элемента в пиксели (px). Для этого данное значение необходимо умножить на размер шрифта родительского элемента.

Например, перевести размер 350px некоторого элемента в em. Для этого данное значение необходимо разделить на размер шрифта родительского элемента.

Внимание: В Twitter Bootstrap 4 по сравнению с Twitter Bootstrap 3 изменено количество устройств в сетке (xs, sm, md, lg, xl).

Система сеток в Twitter Bootstrap 4 предназначена для создания адаптивного макета и состоит из 3 основных компонентов:

  • Контейнеров (блоки с классом .container или .container-fluid).
  • Рядов (блоки с классом .row).
  • Адаптивных блоков (блоки, состоящие из колонок Bootstrap).

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

В Twitter Bootstrap 4 различают 2 основных вида контейнеров:

  • адаптивно-фиксированный контейнер - это блок с классом .container, имеющий фиксированную ширину, которая остаётся постоянной только в пределах некоторого диапазона ширины окна браузера (xs, sm, md, lg и xl).
    Ширина рабочей области окна браузера Тип устройства Ширина контейнера (.container)
    Крохотная ширина (<34em) xs auto
    Маленькая ширина (>=34em и <48em) sm 34rem
    Средняя ширина (>=48em и <62em) md 45rem
    Большая ширина (>=62em и <75em) lg 60rem
    Очень большая ширина (>=75em) xl 72.25rem
    Bootstrap 4 - Адаптивно-фиксированный контейнер (.container)
    Например, если ширина рабочей области окна браузера больше или равно 48em и меньше 62em, то контейнер (блок с классом .container) в этом диапазоне будет иметь ширину, равную 45rem.
    Например, если ширина рабочей области окна браузера больше или равно 62em и меньше 75em, то контейнер (блок с классом .container) в этом диапазоне будет иметь ширину, равную 60rem.
  • адаптивно-резиновый (гибкий) контейнер (.container-fluid) - это блок, имеющий резиновую (плавающую) ширину. Т.е. на любых устройствах (xs, sm, md, lg и xl) он занимает всю доступную ширину (100%) рабочей области окна (вкладки) браузера.
    Ширина рабочей области окна браузера Тип устройства Ширина контейнера (.container-fluid)
    Крохотная ширина (<34em) xs равна доступной ширине (100%) рабочей области окна браузера
    Маленькая ширина (>=34em и <48em) sm
    Средняя ширина (>=48em и <62em) md
    Большая ширина (>=62em и <75em) lg
    Очень большая ширина (>=75em) xl
    Bootstrap 4 - Адаптивно-резиновый (гибкий) контейнер (.container-fluid)
Примечание: Twitter Bootstrap 4 разрешает при создании макетов контейнеры размещать внутри других контейнеров или блоков. Но зачастую эта возможность при создании макетов не требуется.
Контейнер, который помещён в другой блок, занимает:
  • всю его доступную ширину (для контейнера с классом .container-fluid и контейнера с классом .container, у которого установленная ширина для данного типа устройств больше доступной ширины элемента в котором он расположен).
  • установленную ширину (для контейнера с классом .container, у которых установленная ширина для данного типа устройств меньше доступной ширины элемента в котором данный контейнер расположен).

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

Bootstrap 4 - Как располагается контейнер в горизонтальном направлении

Кроме внешних отступов (margin) у контейнеров (.container и .container-fluid) имеются ещё и внутренние отступы (padding), которые определяют доступную ширину для содержимого этого контейнера. Значение внутренних отступов устанавливается равным 0.9375rem с помощью CSS свойств padding-left:.9375rem; и padding-right:.9375rem;.

Bootstrap 4 - Структура контейнера (блока с классом .container или .container-fluid)

Ряды – это блоки с классом .row. Они предназначены для того, чтобы в них размещать адаптивные блоки, состоящие из колонок Bootstrap (<div class="col-*-#">...</div>, где * - тип устройства (xs, sm, md, lg или xl), # - число, указывающее из какого числа колонок Bootstrap состоит блок).

Ряды в свою очередь можно размещать в контейнере (блоках с классом .container и .container-fluid) и адаптивных блоках (блоки, состоящие из колонок Bootstrap .col-*-#).

Ряд выступает своего рода прослойкой и используется в 2 случаях:

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

Ряды имеют отрицательные левые и правые внешние отступы, равные -0.9375rem (margin-left:-0.9375rem и margin-right:-0.9375rem). Ряд, размещенный в контейнере или адаптивном блоке, компенсирует их положительные левые и правые внутренние отступы (padding-left:0.9375rem и padding-right:0.9375rem) своими отрицательными внешними отступами.

Bootstrap 4 - Компенсация рядом внутренних отступов контейнера

Адаптивные блоки – это основные строительные кирпичики адаптивного макета, именно от них будет зависеть, как будет выглядеть макет веб-страницы на разных устройствах (xs, sm, md, lg и xl). Создаётся адаптивный блок очень просто: с помощью добавления класса или классов .col-*-* к любому блочному элементу HTML5 (div, nav, section, main, aside, article и т.п.).

Классы .col-*-* имеют 2 измерения:

  • первая * - это класс устройства: xs, sm, md, lg, xl. Она определяет активность класса, т.е. если, например, текущее устройство является устройством md (ширина рабочей области браузера больше или равна 48em и меньше 62em), то из всех классов у адаптивного блока будет активным только класс .col-md-*.
  • вторая * - это ширина, которую имеет адаптивный блок на определённом устройстве. Ширина адаптивного блока задаётся с помощью колонок Bootstrap от 1 до 12. Колонки Bootstrap – это ширина, которую имеет адаптивный блок в процентном отношении относительно доступной ширины его родителя (ряда). Например, блок с классом .col-md-4 на устройстве md будет иметь ширину, равную 4 колонкам Bootstrap (т.е. 4/12*100% = 33.3%).
Ширина рабочей области окна браузера Тип устройства Префикс класса Ширина адаптивного блока
Крохотная ширина (<34em) xs col-xs-* от 1 до 12 колонок Bootstrap, т.е. от col-xs-1 до col-xs-12
Маленькая ширина (>=34em и <48em) sm col-sm-* от 1 до 12 колонок Bootstrap, т.е. от col-sm-1 до col-sm-12
Средняя ширина (>=48em и <62em) md col-md-* от 1 до 12 колонок Bootstrap, т.е. от col-md-1 до col-md-12
Большая ширина (>=62em и <75em) lg col-lg-* от 1 до 12 колонок Bootstrap, т.е. от col-lg-1 до col-lg-12
Очень большая ширина (>=75em) xl col-xl-* от 1 до 12 колонок Bootstrap, т.е. от col-xl-1 до col-xl-12

На рисунке изображён адаптивный блок, имеющий минимальную ширину, т.е. ширину, равную 1 колонке Bootstrap (1/12*100=8,3% от ширины родительского блока в котором размещён адаптивный блок).

Bootstrap 4 - Адаптивный блок, имеющий минимальную ширину

На рисунке изображён адаптивный блок, имеющий максимальную ширину, т.е. ширину, равную 12 колонкам Bootstrap (12/12*100%=100% от ширины родительского блока в котором размещён адаптивный блок). Bootstrap 4 - Адаптивный блок, имеющий максимальную ширину

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

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


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

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

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

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

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

  • Если адаптивный блок на следующем устройстве (xs->sm->md->lg->xl) имеет туже самую ширину (количество колонок Bootstrap), то её можно не указывать.

    Например, адаптивный блок <div class="col-xs-12 col-sm-6 col-xl-3">...</div> на устройствах md и lg будет иметь ширину, равную 6 колонкам Bootstrap.

    Например, адаптивный блок <div class="col-xs-8 col-md-4">...</div> на устройстве sm будет иметь ширину, равную 8 колонкам Bootstrap, а на устройствах lg и xl - ширину, равную 4 колонкам Bootstrap.

    Например, адаптивный блок <div class="col-xs-6">...</div> на устройствах sm, md, lg и xl будет иметь ширину, равную 6 колонкам Bootstrap.

  • Если адаптивный блок на устройстве xs имеет ширину, равную 12 колонок Bootstrap, то данный класс (.col-xs-12) можно не указывать.
    Например, адаптивный блок <div class="col-sm-6 col-xl-3">...</div> на устройстве xs имеет ширину, равную 12 колонкам Bootstrap.

Как располагаются адаптивные блоки?

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

<div class="container">
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-6"></div>
  </div>
</div>
Bootstrap 4 - Расположение адаптивных блоков

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

<div class="container">
  <div class="row">
    <!--Первая строка-->
    <div class="col-xs-3"></div>
    <div class="col-xs-6"></div>
    <!--Вторая строка-->
    <div class="col-xs-6"></div>
  </div>
</div>
Bootstrap 4 - Расположение адаптивных блоков

В Twitter Bootstrap 4 адаптивные блоки, если не включена поддержка Flexbox, являются плавающими (float:left). Это необходимо учитывать при создании макета веб-страницы:

Bootstrap 4 - Расположение адаптивных блоков без блока с классом .clearfix

Чтобы этого не допустить, необходимо взять за правило размещать пустой блок div с классом .clearfix перед адаптивным блоком, который должен начинаться с новой строки, на определённом устройстве (xs, sm, md, lg, xl). При этом данный блок должен быть видимым только на этом устройстве.

Устройство, на котором блок виден Код блока с классом .clearfix
xs <div class="clearfix hidden-sm-up"></div>
sm <div class="clearfix hidden-xs-down hidden-md-up"></div>
md <div class="clearfix hidden-sm-down hidden-lg-up"></div>
lg <div class="clearfix hidden-md-down hidden-xl-up"></div>
xs <div class="clearfix hidden-lg-down"></div>
<div class="container">
  <div class="row">
    <!--Первая строка-->
    <div class="col-xs-3"></div>
    <div class="col-xs-6"></div>
    <!--Пустой блок с классом .clearfix-->
    <div class="clearfix"></div>
    <!--Вторая строка-->
    <div class="col-xs-6"></div>
  </div>
</div>
Bootstrap 4 - Расположение адаптивных блоков c блоком, имеющим класс .clearfix

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

<div class="container">
  <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>
    <div class="clearfix hidden-sm-up"></div>
    <!--Этот адаптивный блок должен начинаться с новой строки на устройстве xs-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <div class="clearfix hidden-xs-down hidden-md-up"></div>    
    <!--Этот адаптивный блок должен начинаться с новой строки на устройстве sm-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <div class="clearfix hidden-sm-up"></div>
    <div class="clearfix hidden-sm-down hidden-lg-up"></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>
    <div class="clearfix hidden-sm-up"></div>
    <div class="clearfix hidden-xs-down hidden-md-up"></div>  
    <div class="clearfix hidden-md-down hidden-xl-up"></div>  
    <!--Этот адаптивный блок должен начинаться с новой строки на устройстве xs, sm и lg-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
  </div>
</div>

Рассмотрим процесс создания адаптивной разметки, приведенной на рисунке, с помощью системы сеток Twitter Bootstrap 4 за 5 шагов. Bootstrap 4 - Пример адаптивной разметки

На пошаговых слайдах будем изображать адаптивную разметку только для устройств xl.

Шаг 1. Создание контейнера:

<--Контейнер-->
<div class="container">

</div>
Bootstrap 4 - Создание макета. Шаг первый

Шаг 2. Создание ряда внутри контейнера:

<--Контейнер-->
<div class="container">
  <!--Ряд-->
  <div class="row">

  </div>
</div>
Bootstrap 4 - Создание макета. Шаг второй

Шаг 3. Создание адаптивных блоков внутри ряда:

<--Контейнер-->
<div class="container">
  <!--Ряд-->
  <div class="row">
    <!--Адаптивный блок 1-->
    <div class="col-sm-12 col-md-8 col-xl-6">

    </div>
    <!--Адаптивный блок 2-->
    <div class="col-sm-12 col-md-4 col-xl-6">

    </div>
  </div>
</div>
Bootstrap 4 - Создание макета. Шаг третий

Шаг 4. Создание ряда внутри адаптивного блока:

<--Контейнер-->
<div class="container">
  <!--Ряд-->
  <div class="row">
    <!--Адаптивный блок 1-->
    <div class="col-sm-12 col-md-8 col-xl-6">

    </div>
    <!--Адаптивный блок 2-->
    <div class="col-sm-12 col-md-4 col-xl-6">
      <div class="row">

      </div>
    </div>
  </div>
</div>
Bootstrap 4 - Создание макета. Шаг четвёртый

Шаг 5. Создание двух адаптивных блоков внутри ряда:

<--Контейнер-->
<div class="container">
  <!--Ряд-->
  <div class="row">
    <!--Адаптивный блок 1-->
    <div class="col-sm-12 col-md-8 col-xl-6">

    </div>
    <!--Адаптивный блок 2-->
    <div class="col-sm-12 col-md-4 col-xl-6">
      <div class="row">
        <!--Адаптивный блок 3-->
        <div class="col-sm-12 col-xl-6">

        </div>
        <!--Адаптивный блок 4-->
        <div class="col-sm-12 col-xl-6">

        </div>
      </div>
    </div>
  </div>
</div>
Bootstrap 4 - Создание макета. Шаг пятый


   Bootstrap 0    10372 0

Комментарии (23)

  1. Егор # 0
    Здравствуйте. Да уж. Опять перестраиваться немного. Больше всего нервирует rem и em!!!

    Это что, калькулятор подключать? Или блин, таблицу составлять?
    Как вы считаете? Не в уме же?

    Хотя нужно посмотреть в инете, может есть готовая таблица :)))
    1. Александр Мальцев # 0
      Здравствуйте. Наоборот, сетка стала более адаптивной и дружелюбной к мобильным платформам. Это плюс системы.
      Теперь она зависит не от пикселей, а от реальной величины — размера шрифта, установленного для всей странице.
      Т.е. если Вы, например, хотите сделать заголовок шрифтом в 1,5 раза больше, чем основной текст, то устанавливаете ему значение 1.5rem.
      А что там считать 1rem = 16px, 10rem = 160px, 20rem=320px. Или наоборот 960px — 60rem, 1280px -80rem и т.п.
      Ну, а если в символах, то в 10rem приблизительно помещается 20 строчных символов (или 10 прописных), в 20rem – приблизительно 40 строчных символов (или 20 прописных) и т.д.
      Т.е. если Вам необходимо создать блок, в который помещалось бы 40 символов, то ему необходимо установить ширину 20rem.
      1. Егор # 0
        Это понятно, что сетка стала более гибкой. Я просто уже привык padding и margin делать 15, 20, 30, 50, 70px. Например, если padding-top или padding-bottom, то смело можно указывать в пикселах, но это как-то не правильно и непрофессионально, смешивать единицы измерения. Ерунда, привыкну.

        Еще бы не перепутать «col-*-#» на BS-3 и BS-4 теперь.
        1. Александр Мальцев # 0
          Что поделаешь, привыкать придётся.
    2. Сергей # 0
      Если можно расскажите как будет вести себя сетка если включен Flexbox? Или ссылку где можно об этом почитать.
      1. Александр Мальцев # 0
        Здравствуйте, Сергей.
        Если Вы активируете режим Flexbox, то ничего не произойдёт. Сетка будет выглядеть также как и раньше. Просто для её формирования будет использоваться не способ основанный на display:float, а Flexible Box Layout Module (display: flex и др.).
        Единственное ограничение связано с тем что не все браузеры поддерживают FlexBox (IE11+, Firefox 28+, Chrome 21+, Safari 6.1+, Opera 12.1+, Android 4.4 Browser+).
      2. Сергей # 0
        Спасибо за ответ, разобрался.
        1. ctac # 0
          col-xl — в доках по этому ничего не нашел. в примерах с подключенным BS тоже не работает!
          1. ctac # 0
            ой. задал глупый вопрос, перечитал и нашел ответ. странно, считал все темы на сайте перечитал.
            1. Кирилл # 0
              Здравствуйте! Подскажите, как сделать, чтобы шрифт изменялся вместе с блоком пропорционально при изменении размеров браузера. У меня получилось делать это медиа запросами, но прописывать для каждого размера экрана размер шрифта вроде слишком долго и CSS код большой получается.
              1. Александр Мальцев # 0
                Здравствуйте!
                Могу предложить ещё 2 способа:
                1. С помощью CSS. Он основывается на использовании единицы измерения vw.
                vw — это viewport width.
                1vw = 1% от ширины viewport.
                body {
                  font-size: 5vw;
                }
                
                2. С помощью JavaScript (более гибкий).
                Например, так:
                $(function() {
                  $('body').css('font-size',(16+0.5*$('body').width()/100)+'px');
                  $(window).resize(function(){
                    $('body').css('font-size',(16+0.5*$('body').width()/100)+'px');
                  });
                });
                
              2. Anton # 0
                День добрый, подскажите есть макет psd в 1600px максимальная ширина, основной текст 1200 px, макет разделен на 15 колонок, как мне вот этот чудо макет подстроить под bs? Кстати и негде пока еще не нашел кастомайзер для bs4 как у третьего, может где уже есть?)
                1. Александр Мальцев # 0
                  Customizer под Bootstrap 4 ещё нет, т.к. он находится только в версии альфы 2. Bootstrap 4 альфа 2 лучше не использовать для рабочих сайтов.
                  Сетку на 15 колонок сделать можно, только сборку Bootstrap придётся собирать самостоятельно. Как это сделать напишу, но немного позже, после выхода бета версии.
                2. Vad # 0
                  Ну вот. только собрался заваять сайтик на BS4, а Вы не советуете его использовать для продакшена:(
                  Обидно же будет сделать на BS3, а потом переписывать через 2-3 месяца!
                  Как же быть?

                  PS сайт у Вас отличный! Пишете четко, внятно и понятно. Спасибо!
                  1. Александр Мальцев # 0
                    Не думаю что рабочая версия выйдет через 2-3 месяца. А как его можно использовать, если большинство компонентов не работают?
                    Надо создавать на рабочем фреймворке (Bootstrap 3.3.6), а когда выйдет новая стабильная версия, то переходить на неё. А если так рассуждать, то вечно нужно будет ждать новую версию. Потому что когда выйдет Bootstrap 4, то начнётся разработка Bootstrap 5 и т.д.
                    А чем Вас не устраивает Bootstrap 3?
                  2. ctac # 0
                    спасибо.
                    1. Denis # 0
                      Здравствутйе, Александр. Низкий поклон Вам за уроки!
                      Подскажите, можно ли без использования js сделать такой макет:

                      XS и SM получилось сделать через push и pull, а в MD получается только так:

                      1. Александр Мальцев # 0
                        Спасибо, Денис.
                        Не получится. push и pull позволяют сдвигать блоки только в пределах строки. Их принцип работы основан на CSS свойств left и right.
                        На xs и sm будет такая разметка:
                        <div class="container">
                          <div clas="row">
                            <div id="id-1" class="col-sm-12" style="height: 100px; background: pink;">1</div>
                            <div id="id-2" class="col-sm-push-8 col-sm-4" style="height: 150px; background: 
                        brown;">2</div>
                            <div id="id-3" class="col-sm-pull-4 col-sm-8" style="height: 200px; background: 
                        lime;">3</div>
                          </div>
                        </div>
                        
                        На md должна быть такая структура:
                        <div class="container">
                          <div clas="row">
                            <div class="col-md-8">
                              <div class="row">
                                <div id="id-1" class="col-md-12" style="height: 100px; background: pink;">1</div>
                                <div id="id-3" class="col-md-12" style="height: 200px; background: lime;">3</div>
                              </div>
                            </div>
                            <div id="id-2" class="col-md-4" style="height: 150px; background: brown;">2</div>
                          </div>
                        </div>
                        
                        Эту задачу можно решить, используя либо скрытые блоки, либо js.
                        Например, используя скрытые блоки:
                        <div class="container">
                          <div clas="row">
                            <div class="col-sm-12 col-md-8">
                              <div class="row">
                                <div id="id-1" class="col-sm-12 col-md-12" style="height: 100px; background: pink;">1</div>
                                <div id="id-2" class="col-sm-push-8 col-sm-4 col-md-12 hidden-md hidden-lg" style="height: 150px; background: brown;">2</div>
                                <div id="id-3" class="col-sm-8 col-md-12 col-sm-pull-4 col-md-pull-0" style="height: 200px; background: lime;">3</div>
                              </div>
                            </div>
                            <div id="id-2" class="hidden-xs hidden-sm col-md-4" style="height: 150px; background: brown;">2</div>
                          </div>
                        </div>
                        
                        1. Denis # 0
                          Большое спасибо, Александр! Подтвердили мои догадки, казалось бы простой макет, думал где-то что-то упустил…

                          Еще заметил в первом вашем коде для xs вы ни в одном из блоков не указываете col-xs-12, как блоки «понимают», что каждый должен занять всю ширину?
                          Я имею ввиду, почему вы пишете:
                          <div id="id-1" class="col-sm-12">1</div>
                          <div id="id-2" class="col-sm-push-8 col-sm-4">2</div>
                          <div id="id-3" class="col-sm-pull-4 col-sm-8" >3</div>
                          
                          а не:
                          <div id="id-1" class="col-xs-12 col-sm-12">1</div>
                          <div id="id-2" class="col-xs-12 col-sm-push-8 col-sm-4">2</div>
                          <div id="id-3" class="col-xs-12 col-sm-pull-4 col-sm-8" >3</div>
                          
                          1. Александр Мальцев # 0
                            Если не указывать col-xs-12, то блоки не будут плавающими (float), а распологаться в нормальном потоке. А блоки в нормальном потоке (normal flow) по умолчанию занимают всю ширину родительского блока и распологаются один по другим. Это алгоритм поведения блоков по умолчанию в соответствии со спецификацией HTML и CSS.

                            Если укажите col-xs-12, то блоки будут плавающими и им будет установлено ширина, равная 100%. А т.к. в Bootstrap используется для задания размеров блоков режим box-sizing: border-box, то они также будут занимать всю ширину родительского блока. А т.к. каждый из блоков занимает всю ширину, то они тоже будут размещаться один под одним.

                            Т.е. разница только в реализации, а конечный результат один и тот же. Поэтому можно использовать как первый вариант, так и второй.
                            1. Denis # 0
                              Спасибо за развернутый ответ! Удачи Вам!
                      2. Дмитрий # 0
                        Здравствуйте! Подскажите, пожалуйста, для чего используется приставка «up» и «down» (перевод знаю, для чего не понимаю), и в чем различие? Почему сразу два дива с clearfix используется???

                        1. Александр Мальцев # 0
                          Классы hidden-*-up и hidden-*-down предназначены для скрытия элементов. Они подробно описаны в статье Адаптивные классы Bootstrap 4.
                          В некоторых случаях класс clearfix невозможно установить одновременно для нескольких устройств (например, sm и lg). Поэтому используется 2 div с классом clearfix. Например, один для sm, а другой для lg.

                        Вы должны авторизоваться, чтобы оставлять комментарии.