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    40100 0

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

  1. nad # 0
    А можно поменять местами не колонки а ряды?
    1. Александр Мальцев # 0
      Ряды (.row) переупорядочивать нельзя, так как они имеют другое предназначение.
      Если сайт адаптивный и блоки надо переупорядочивать, то это надо выполнять с помощью колонок Twitter Bootstrap 3.
      Опишите ситуацию подробнее.
      1. nad # 0
        мне надо на маленьком размере экрана поменять местами block1 и block2
    2. nad # 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 # 0
        я так понимаю, что pull и push действуют если только элементы все лежат в одном row
        1. Александр Мальцев # 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 # 0
            Да, блоки надо поменять местами. col-md-offset — потому что на большом экране слева пустое место
        2. nad # 0
          эти два блока должны стоять друг под другом справа на любых размерах экрана, а не в ряд — в этом то и проблема, и я не могу найти способ поменять их местами с помощью bootatrap.
          1. Александр Мальцев # 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. Александр Мальцев # 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 # 0
              1. Александр Мальцев # 0
                Штатными средствами Bootstrap так сделать нельзя, т.к. переупорядочивание колонок col-*-push-? и col-*-pull-? можно выполнять только от 1 до 11.
                Решить такую задачу возможно только с помощью JavaScript, посредством изменения HTML кода. Если такой вариант устраивает, то могу выложить решение этой проблемы немного попозже.
                1. неуверенный # 0
                  а по моему можно, просто нужно сделать в первом варианте офсет, ну а дальше пуш и пул
                2. nad # 0
                  Извините Chief, я плохо объяснила задачу, выкладываю картинку, чтоб понятнее было.
                  1. nad # 0
                    Я прихожу к выводу, что если в одном блоке row находится два блока col-md-12, то поменять местами их нельзя?
                    1. Александр Мальцев # 0
                      Только с помощью JavaScript.
                    2. nad # 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. Александр Мальцев # 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. Дмитрий # 0
                          Работа с DOM довольно дорогая по ресурсам. Поэтому, проще переверстать без js, я считаю
                      2. linda # 0
                        Сразу говорю, я только начала изучать bootstrap, читаю документацию. Поэтому, вопрос, может глупый… Но, не проще ли все сделать с помощью медиа=запросов @media only screen and (max-width: 480px) Так можно указать любую ширину, а не стандартные, все будет вынесено в .css файл. Или я что-то не так поняла?
                        1. Александр Мальцев # 0
                          Добрый день, linda.

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

                          Что касается разметки, то её конечно можно создать с помощью CSS, но это будет намного сложнее и займёт в разы больше времени.
                          1. Александр Мальцев # 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. Лариса # 0
                            большое спасибо за статью! очень помогла!
                            1. Владимир # 0
                              Может кто подсказать. Есть верхнее меню. В нем пункты при больших разрешениях через pull-right добавлены вправо.
                              При маленьких рахрешениях, нужно, чтобы эти элементы были слева, как это можно сделать?
                              1. Александр Мальцев # 0
                                А что Вам мешает его сделать с помощью стилей.
                                1. Удалите у этого элемента данный класс.
                                2. Добавьте к элементу некоторый идентификатор (например, myElem).
                                3. Добавьте в CSS стиль:
                                @media (min-width: 768px) {
                                  #myElem {
                                    float: right !important;
                                  }
                                }
                                
                                1. Владимир # 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. Александр Мальцев # 0
                                    Укажи вместо 768px нужную ширину.
                                    1. Владимир # 0
                                      Указывал, тоже не помогает
                              2. Westus # 0
                                А как поменять местами 4 блока?
                                На большом экране есть:
                                1 2 3 4
                                А на маленьком нужно получить:
                                1 4
                                2
                                3
                                1. Westus # 0
                                  Разобрался. Просто в тексте явно не указано, что в col-md-push-3 цифра 3 означает на сколько столбиков нужно сместить.
                                2. Safbek # 0
                                  Здрасти! Ответьте на несколько вопросов, пожалуйста!
                                  1. как прописывать стили для row? ведь они все одинаковые. если же добавляю класс от себя для идентификации, то адаптивность пропадает. например, у меня несколько контейнеров(1-3 штук). как в данном случае в css определять стиль для каждого из них.
                                  2. как сделать картинку-фон на всю ширину и слева текст столбиком? Никак не нагуглю ниче.

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