Классы Bootstrap 3 для изменения порядка следования блоков

В этой статье познакомимся с классами сетки Bootstrap 3, предназначенными для адаптивного изменения порядка следования блоков в пределах строки, в которой они расположены.

---

Фреймворк Bootstrap содержит большое количество классов и компонентов. Но перед тем как переходить к наполнению сайта этими элементами, необходимо сначала создать каркас (макет) страницы. Данное действие в Bootstrap выполняется с помощью «строительных» элементов сетки. К этим элементам относятся обёрточные контейнеры, ряды, адаптивные блоки и др. Более подробно ознакомиться с этими элементами можно в статье «Bootstrap 3 – Сетка».

Но при проектировании макета зачастую бывает так, что необходимо на одних устройствах блоки расположить в одном порядке, а на других – в другом. Для реализации этого поведения блоков в Bootstrap 3 предназначены классы push и pull.

Классы push и pull

Классы push и pull предназначены для изменения порядка следования адаптивных блоков для конкретных типов устройств в пределах некоторой строки. Это означает, что адаптивные блоки на одном устройстве могут иметь один порядок следования, а на другом другой.

Классы push и pull должны использоваться вместе с классами сетки Bootstrap. Класс push выполняет смещение адаптивного блока на определённое количество колонок вправо, а класс pull — на определённое количество колонок влево.

Синтаксис классов push и pull:

col-{breakpoint}-push-{nc}
col-{breakpoint}-pull-{nc}

{breakpoint} - тип устройства (xs, sm, m или lg)
{nc} - количество колонок (по умолчанию 0...12)

В следующей таблице показан синтаксис классов push и pull для различных размеров экрана.

Ширина viewport	Классы push	Классы pull
>0px (xs)	.col-xs-push-{nc}	.col-xs-pull-{nc}
>=768px (sm)	. col-sm-push-{nc}	.col-sm-pull-{nc}
>=992px (md)	.col-md-push-{nc}	.col-md-pull-{nc}
>=1200px (lg)	.col-lg-push-{nc}	.col-lg-pull-{nc}

Пример использования классов push и pull

Рассмотрим небольшой пример. Допустим, есть макет, состоящий из трёх блоков. Необходимо, чтобы на больших экранах блоки располагались горизонтально. Причём второй (2) блок, который содержит основной контент, находился посередине между первым (1) и третьим (3) блоками.

В то же время, на устройствах с маленьким экраном, нужно чтобы блоки располагались вертикально один под другим. Причём второй (2) блок должен располагаться над первым (1).

Разработку макета начнём с устройств, имеющих маленький размер экрана (xs и sm):

<div>
  <div>
    2 блок
  </div>
  <div>
    1 блок
  </div>
  <div>
    3 блок
  </div>
</div>

Доработаем адаптивные блоки, а именно установим им ширину, которые они должны иметь на средних и больших экранах:

<div>
  <div>
    2 блок
  </div>
  <div>
    1 блок
  </div>
  <div>
    3 блок
  </div>
</div>

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

Для этого второй (2) адаптивный блок сдвинем вправо на 3 колонки, а первый (1) сдвинем влево на 6 колонок Bootstrap.

<!-- Boostrap 3 -->  
<div>
  <div>
    2 блок
  </div>
  <div>
    1 блок
  </div>
  <div>
    3 блок
  </div>
</div>

Рекомендации по разработке макета с помощью сетки Bootstrap

При создании макета с использованием сетки фреймворка Bootstrap 3 предпочтительнее начинать разработку с устройств, которые имеют крохотный размер экрана (смартфоны).

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

Изменяем порядок колонок с помощью push и pull в Bootstrap

Давайте сразу посмотри демо1 и демо2. Если не смотреть в код, то в обоих примерах нет совершенно никакх различий, конечно, если вы смотрите в большом разрешении. Но давайте попробуем уменьшить. Как видно, в демо2 левый блок находится под правым, т.е. основное содержимое сайта находится выше, чем менее значимый блок.

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

Если взглянуть на код, то здесь у нас идет последовательно сначала <aside> (сайдбар), а уже потом только <article> (статья). Собственно, в демо1 мы видим тоже самое: сначала блок, потом сайдбар.

Давайте сначала просто попробуем переставить, местами <aside> и <article> и вот что у нас получилось (см. демо)

При большом разрешении мы видим, что контентная часть у нас стала ливее, а сайдбар правее. Если уменьшить размер, то все отлично: контент выше, сайдар ниже. Но при большом размере браузера мы все-таки хотим видеть сайдар слева, а контент справа, а при маленьком размере экрана контент сверху, а сайдбар снизу. Давайте это сделаем.

<div>
    <article>
        <h2>Services</h2>
        <p><img src="img/cockatiel. jpg">Wisdom Pet Medicine is a state-of-the-art veterinary hospital,   featuring the latest in diagnostic and surgical equipment, and a staff   of seasoned veterinary specialists in the areas of general veterinary   medicine and surgery, oncology, dermatology, orthopedics, radiology,   ultrasound, and much more. We also have a 24-hour emergency clinic in   the event your pet needs urgent medical care after regular business   hours.</p>
        <p>At Wisdom, we strive to be your pet&rsquo;s medical experts from youth   through the senior years. We build preventative health care plans for   each and every one of our patients, based on breed, age, and sex, so   that your pet receives the most appropriate care at crucial milestones   in his or her life. Our overarching goal is to give your pet the best   shot possible at a long and healthy life, by practicing simple   preventative care. We even provide an online Pet Portal where you can   view all your pet&rsquo;s diagnostic results, treatment plans, vaccination and   diagnostic schedules,  prescriptions, and any other health records. 
  </p>
    </article>
    <aside>
        <h4>Keeping your pet's chompers clean and healthy</h4>
        <p>You know the importance of brushing your own teeth, but did you know that dogs and cats also need regular attention to their pearly whites? Poor dental hygiene in pets can lead to periodontal disease, a bacterial infection which causes bad breath, drooling, tooth decay, and tooth loss.</p>
        <p>As always, if you have questions about your pet’s dental or health care, please <a href="#">contact Wisdom Pet Medicine</a> for advice.</p>
     </aside>
</div>

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

<article>
    ...
</article>
<aside>
    ...
</aside>

Помимо классов, которые мы делали в прошлом уроке, мы добавляем еще col-lg-push-3 col-sm-push-4 к тегу <article>, это означает, что нужно переместить нашу колонку с контентом в большой сетке вправо на 3 колонки (именно столько занимает сайдбар в большой сетке), и так же переместить вправо на 4 колонки в маленькой сетке (столько занимает сайдар в маленькой сетке).

А к тегу <aside> мы добавим смещение влево col-lg-pull-9 col-sm-pull-8, но хочу заметить, что здесь мы смещаем на число, занимаемое в определенной сетке статьей +1. Почему +1 — потому что у нас у <article> еще есть дополнительная невидимая колонка, которую мы создавали для добавления отступа между колонками.

Готово, теперь мы умеем переставлять колонки местами.

Скачать урок

html — Порядок столбцов в Bootstrap 4 с push/pull и col-md-12

спросил

6 лет, 8 месяцев назад

Изменено 1 год, 11 месяцев назад

Просмотрено 54к раз

У меня есть два столбца с классом col-md-12 каждый.

В режиме рабочего стола они должны отображаться следующим образом:

 Колонка **1**
Кол **2**
 

В мобильной версии должно отображаться так:

 Col **2**
Кол **1**
 

Возможно ли это вообще с порядком столбцов Bootstrap?

Мой текущий код:

 

    <дел>
        колонка 1
    
    <дел>
        колонка 2