Bootstrap 3 - Переупорядочивание колонок системы сеток

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

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

Данная функция применяется не часто, но при этом является весьма полезным инструментом при условии правильного её использования.

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

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

1
2
3

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

2
1
3

Bootstrap позволяет выполнить это с помощью классов push и pull.

Классы push и pull используются вместе с классами сетки Bootstrap .col-xs-*, .col-sm-*, .col-md-*, и .col-lg-*. Класс push выполняет перемещение колонок вправо, в то время как класс pull перемещает колонок влево.

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

Ширина рабочей области окна браузера Классы push Классы pull
<768px (xs) .col-xs-push-* .col-xs-pull-*
>=768px и <992px (sm) .col-sm-push-* .col-sm-pull-*
>=992px и <1200px (md) .col-md-push-* .col-md-pull-*
>=1200px (lg) .col-lg-push-* .col-lg-pull-*

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

Макет с переупорядочиванием колонок Bootstrap

Разработку макета начнём для устройств с маленьким размером экрана:

<div class="row">
  <div class="col-xs-12">
    2 блок
  </div>
  <div class="col-xs-12">
    1 блок
  </div>
  <div class="col-xs-12">
    3 блок
  </div>
</div>

Добавим классы для устройств со средним и большим экранами:

<div class="row">
  <div class="col-xs-12 col-md-6">
    2 блок
  </div>
  <div class="col-xs-12 col-md-3">
    1 блок
  </div>
  <div class="col-xs-12 col-md-3">
    3 блок
  </div>
</div>

Теперь мы должны добавить классы push и pull, чтобы изменить порядок следования блоков для устройств с большим и средним размерами экранов:

<div class="row">
  <div class="col-xs-12 col-md-6 col-md-push-3">
    2 блок
  </div>
  <div class="col-xs-12 col-md-3 col-md-pull-6">
    1 блок
  </div>
  <div class="col-xs-12 col-md-3">
    3 блок
  </div>
</div>

Для демонстрации данного макета, измените размер окна браузера:

2 блок
1 блок
3 блок

При разработке макета на основе системы сеток Twitter Bootstrap лучше начинать с устройств, которые имеют очень маленький размер экрана (смартфоны). Т.к. переупорядочить колонки для устройств с большим размером экрана намного проще, чем для устройств, имеющих маленький размер экрана. Следовательно, вы должны сначала сфокусироваться на упорядочивании колонок для мобильных устройств, а затем переходить к устройствам с большими размерами экранов.

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

Блок 2 на маленьких экранах будет вытесняться, и располагаться выше блоков 1 и 3.

2
1
3

Блок 2 на маленьких экранах будет вытесняться, и располагаться ниже блоков 1 и 3.

1
3
2

Блок 1 на больших экранах будет располагаться справа, как боковая панель (sidebar).

1
2


   Bootstrap 0    48739 0

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

  1. nad 24 ноября 2014, 13:36 # 0
    А можно поменять местами не колонки а ряды?
    1. Александр Мальцев 24 ноября 2014, 14:07 # 0
      Ряды (.row) переупорядочивать нельзя, так как они имеют другое предназначение.
      Если сайт адаптивный и блоки надо переупорядочивать, то это надо выполнять с помощью колонок Twitter Bootstrap 3.
      Опишите ситуацию подробнее.
      1. nad 24 ноября 2014, 14:19 # 0
        мне надо на маленьком размере экрана поменять местами block1 и block2
    2. nad 24 ноября 2014, 14:21 # 0
      извините, код такой
      <div class="row">
                   <div class="col-md-6 col-md-offset-6 col-xs-12 block1">
                      <div class="row">
                        <div class="col-xs-6"><a href="" target="_blank"><img src="" class="img-responsive"></a></div>
                        <div class="col-xs-6"><a href="" target="_blank"><img src="" class="img-responsive"></a></div>
                      </div>
                    </div>
      
                    <div class="col-md-6 col-md-offset-6 col-xs-12 block2">
                      <div class="video">
                        <div class="embed-responsive embed-responsive-16by9">
                          <iframe class="embed-responsive-item" src=""></iframe>
                        </div>
                      </div>
                    </div>
                  </div>
      1. nad 24 ноября 2014, 14:23 # 0
        я так понимаю, что pull и push действуют если только элементы все лежат в одном row
        1. Александр Мальцев 24 ноября 2014, 15:17 # 0
          Да push и pull должны располагаться в одном контейнере, например .row.
          Тут немного по-другому, сначала надо правильно расположить блоки на маленьком экране, а уже потом переупорядочивать их для остальных экранов.
          Насколько, я понял на маленьком экране сначала должен идти block2, а потом block 1.
          А на md block1, а потом block2. Только не понятно про смещение col-md-offset-6, зачем оно?
          <div class="row">
          
            <div class="col-md-6 col-md-push-6 col-xs-12 block2">
              <div class="video">
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" src=""></iframe>
                </div>
              </div>
            </div>
          
            <div class="col-md-6 col-md-pull-6 col-xs-12 block1">
              <div class="row">
                <div class="col-xs-6"><a href="" target="_blank"><img src="" class="img-responsive"></a></div>
                <div class="col-xs-6"><a href="" target="_blank"><img src="" class="img-responsive"></a></div>
              </div>
            </div>
          
          </div>
          
          1. nad 24 ноября 2014, 15:29 # 0
            Да, блоки надо поменять местами. col-md-offset — потому что на большом экране слева пустое место
        2. nad 24 ноября 2014, 15:33 # 0
          эти два блока должны стоять друг под другом справа на любых размерах экрана, а не в ряд — в этом то и проблема, и я не могу найти способ поменять их местами с помощью bootatrap.
          1. Александр Мальцев 24 ноября 2014, 15:57 # 0
            Если у вас макет не изменяется, то зачем вам его переупорядочивать. Надо быть проще
            <div class="col-xs-offset-6 col-xs-6"> 
              <div class="row">
             
                <div class="col-xs-12 block2">
                  <div class="video">
                    <div class="embed-responsive embed-responsive-16by9">
                      <iframe class="embed-responsive-item" src=""></iframe>
                    </div>
                  </div>
                </div>
            
                <div class="col-xs-12 block1">
                  <div class="row">
                    <div class="col-xs-6"><a href="" target="_blank"><img src="" class="img-responsive"></a></div>
                    <div class="col-xs-6"><a href="" target="_blank"><img src="" class="img-responsive"></a></div>
                  </div>
                </div>
            
              </div>
            </div>
            
            1. Александр Мальцев 24 ноября 2014, 16:02 # 0
              А зачем Вам слева большое место? Там что ничего не будет?
              Если будет, то зачем Вам offset?

              Я бы сделал лучше так:

              <div class="col-xs-6">
              <!-- Место слева -->
              </div>
              
              <div class="col-xs-6"> 
                <div class="row">
               
                  <div class="col-xs-12 block2">
                    <div class="video">
                      <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src=""></iframe>
                      </div>
                    </div>
                  </div>
              
                  <div class="col-xs-12 block1">
                    <div class="row">
                      <div class="col-xs-6"><a href="" target="_blank"><img src="" class="img-responsive"></a></div>
                      <div class="col-xs-6"><a href="" target="_blank"><img src="" class="img-responsive"></a></div>
                    </div>
                  </div>
              
                </div>
              </div>
              
            2. nad 24 ноября 2014, 16:00 # 0
              1. Александр Мальцев 24 ноября 2014, 16:56 # 0
                Штатными средствами Bootstrap так сделать нельзя, т.к. переупорядочивание колонок col-*-push-? и col-*-pull-? можно выполнять только от 1 до 11.
                Решить такую задачу возможно только с помощью JavaScript, посредством изменения HTML кода. Если такой вариант устраивает, то могу выложить решение этой проблемы немного попозже.
                1. неуверенный 14 января 2016, 10:22 # 0
                  а по моему можно, просто нужно сделать в первом варианте офсет, ну а дальше пуш и пул
                2. nad 24 ноября 2014, 16:08 # 0
                  Извините Chief, я плохо объяснила задачу, выкладываю картинку, чтоб понятнее было.
                  1. nad 24 ноября 2014, 16:26 # 0
                    Я прихожу к выводу, что если в одном блоке row находится два блока col-md-12, то поменять местами их нельзя?
                    1. Александр Мальцев 24 ноября 2014, 16:56 # 0
                      Только с помощью JavaScript.
                    2. nad 24 ноября 2014, 17:04 # 0
                      Спасибо большое за помощь Chief!
                      Для тех кто не знает js я «придумала» хитрый способ с помощью класса hidden:
                      <div class="row">
                                    <div class="col-md-6 col-md-offset-6 hidden-xs">
                                      <div class="video">
                                        <div class="embed-responsive">
                                          <iframe class="embed-responsive-item" src=""></iframe>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="col-md-6 col-md-offset-6">
                                      <div class="row">
                                        <div class="col-xs-6"><a href=""><img src=""></a></div>
                                        <div class="col-xs-6"><a href=""><img src=""></a></div>
                                      </div>
                                    </div>
                                    <div class="col-md-6 col-md-offset-6 hidden-lg hidden-md hidden-sm">
                                      <div class="video">
                                        <div class="embed-responsive">
                                          <iframe class="embed-responsive-item" src=""></iframe>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                      1. Александр Мальцев 24 ноября 2014, 18:39 # 0
                        Вот решение на jquery:

                        <script src="js/jquery-1.11.1.min.js"></script>
                        <script>
                        function windowSize(){
                          if ($(window).width() >= '975')
                          {
                            $('#block1').detach().insertAfter('#block2');
                          } 
                          else 
                          {
                            $('#block2').detach().insertAfter('#block1');
                          }
                        }
                        $(window).load(windowSize); 
                        $(window).resize(windowSize);
                        </script>
                        ...
                        <div class="container">
                          <div class="row">
                            <div class="col-md-offset-6 col-md-6 col-xs-12"> 
                              <div class="row">
                                
                                <div id="block1" class="col-xs-12">
                                  <div class="video">
                                    <div class="embed-responsive embed-responsive-16by9">
                                      <iframe class="embed-responsive-item" src=""></iframe>
                                    </div>
                                  </div>
                                </div>
                                
                                <div id="block2" class="col-xs-12">
                                  <div class="row">
                                    <div class="col-xs-6"><a href="" target="_blank"><img src="" class="img-responsive"></a></div>
                                  <div class="col-xs-6"><a href="" target="_blank"><img src="" class="img-responsive"></a></div>
                                </div>
                              
                              </div>
                            </div>
                          </div>
                        </div>
                        
                        1. Дмитрий 02 июля 2016, 09:03 # 0
                          Работа с DOM довольно дорогая по ресурсам. Поэтому, проще переверстать без js, я считаю
                      2. linda 19 марта 2015, 06:01 # 0
                        Сразу говорю, я только начала изучать bootstrap, читаю документацию. Поэтому, вопрос, может глупый… Но, не проще ли все сделать с помощью медиа=запросов @media only screen and (max-width: 480px) Так можно указать любую ширину, а не стандартные, все будет вынесено в .css файл. Или я что-то не так поняла?
                        1. Александр Мальцев 19 марта 2015, 17:02 # 0
                          Добрый день, linda.

                          Платформа Twitter Bootstrap 3 состоит не только из классов, предназначенных для создания адаптивной разметки, но и многих других «вкусностей» которые значительно облегчают жизнь веб-разработчика.

                          Что касается разметки, то её конечно можно создать с помощью CSS, но это будет намного сложнее и займёт в разы больше времени.
                          1. Александр Мальцев 20 марта 2015, 13:55 # 0
                            Давайте в качестве примера рассмотрим очень простую разметку, состоящую всего из 2 блоков. Т.к. разметка адаптивная, то она будет зависеть от ширины рабочей области окна браузера:
                            • На устройствах с очень маленькой шириной экрана (размер рабочей области до 768рх) блоки будет располагаться вертикально, и занимать всю ширину родительского элемента;
                            • На устройствах с маленьким размером экрана (размер рабочей области окна браузера больше 768рх и меньше 992рх) блоки будут располагаться горизонтально. При этом 1 блок будет занимать 42% от ширины родительского элемента, а 2 блок оставшиеся 68% ширины родительского элемента.
                            • На устройствах со средним экраном (ширина рабочей области окна браузера больше 992рх и меньше 1200рх) блоки то же будут располагаться горизонтально. Но при этом блоки будут иметь уже другую ширину: 1 блок будет занимать 33% от ширины родительского элемента, а 2 блок — 67%;
                            • На устройствах с большим экраном (ширина рабочей области окна браузера больше 1200рх) блоки будут располагаться аналогично, но ширина блоков уже будет следующей: 1 блок будет занимать 25% от ширины родительского элемента, а 2 блок — 75%.
                            На Twitter Bootstrap данная разметка будет выглядеть следующим образом:
                            <div class="col-lg-3 col-md-4 col-sm-5 col-xs-12"></div>
                            <div class="col-lg-9 col-md-8 col-sm-7 col-xs-12"></div>
                            
                            А теперь, попробуйте создать данную разметку с помощью CSS.
                            Я сомневаюсь, что это будет так просто и быстро :)
                          2. Лариса 26 января 2016, 12:27 # 0
                            большое спасибо за статью! очень помогла!
                            1. Владимир 21 февраля 2016, 12:09 # 0
                              Может кто подсказать. Есть верхнее меню. В нем пункты при больших разрешениях через pull-right добавлены вправо.
                              При маленьких рахрешениях, нужно, чтобы эти элементы были слева, как это можно сделать?
                              1. Александр Мальцев 21 февраля 2016, 17:02 # 0
                                А что Вам мешает его сделать с помощью стилей.
                                1. Удалите у этого элемента данный класс.
                                2. Добавьте к элементу некоторый идентификатор (например, myElem).
                                3. Добавьте в CSS стиль:
                                @media (min-width: 768px) {
                                  #myElem {
                                    float: right !important;
                                  }
                                }
                                
                                1. Владимир 21 февраля 2016, 17:13 # 0
                                  Я так делал, не помогает, может быть я не там выставляю этот класс (у меня это testclass)?
                                  HTML-код:
                                  <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
                                        <div class="container">
                                          <div class="navbar-header">
                                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                              <span class="sr-only">Toggle navigation</span>
                                              <span class="icon-bar"></span>
                                              <span class="icon-bar"></span>
                                              <span class="icon-bar"></span>
                                            </button>
                                            <a class="navbar-brand" href="#">test</a>
                                          </div>
                                          <div class="collapse navbar-collapse">
                                            <ul class="nav navbar-nav testclass">
                                              <li><a href="#">Пункт 1</a></li>
                                              <li><a href="#">Пункт 2</a></li>
                                              <li><a href="#">Пункт 3</a></li>
                                            </ul>
                                          </div><!-- /.nav-collapse -->
                                        </div><!-- /.container -->
                                      </div><!-- /.navbar -->

                                  1. Александр Мальцев 22 февраля 2016, 05:47 # 0
                                    Укажи вместо 768px нужную ширину.
                                    1. Владимир 22 февраля 2016, 10:53 # 0
                                      Указывал, тоже не помогает
                              2. Westus 29 марта 2016, 06:13 # 0
                                А как поменять местами 4 блока?
                                На большом экране есть:
                                1 2 3 4
                                А на маленьком нужно получить:
                                1 4
                                2
                                3
                                1. Westus 29 марта 2016, 07:02 # 0
                                  Разобрался. Просто в тексте явно не указано, что в col-md-push-3 цифра 3 означает на сколько столбиков нужно сместить.
                                2. Safbek 11 апреля 2016, 19:10 # 0
                                  Здрасти! Ответьте на несколько вопросов, пожалуйста!
                                  1. как прописывать стили для row? ведь они все одинаковые. если же добавляю класс от себя для идентификации, то адаптивность пропадает. например, у меня несколько контейнеров(1-3 штук). как в данном случае в css определять стиль для каждого из них.
                                  2. как сделать картинку-фон на всю ширину и слева текст столбиком? Никак не нагуглю ниче.

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