Как изменить порядок столбцов Bootstrap 3 на мобильном макете?

Я делаю адаптивный макет с фиксированной верхней панелью навигации. Ниже у меня есть две колонки, одна для боковой панели (3), а другая для контента (9). Который на рабочем столе выглядит так

navbar
[3] [9]

Когда я resizeс мобильного телефона navbarсжат и скрыт, то боковая панель накладывается поверх содержимого, например:

navbar
[3]
[9]

Я бы хотел, чтобы основной контент находился вверху, поэтому мне нужно изменить порядок на мобильном телефоне следующим образом:

navbar
[9]
[3]

Я нашел эту статью, которая охватывает те же вопросы, но принятый ответ был отредактирован, чтобы сказать, что решение не относится к текущей версии Bootstrap.

Как я могу изменить порядок этих столбцов на мобильном телефоне? Или, в качестве альтернативы, как я могу получить список списков sidbar в моей расширяющейся панели навигации?

Вот мой код:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

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

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

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

По умолчанию сначала отображается основной контент.

Так что в мобильном телефоне основной контент отображается первым.

Используя col-lg-pushи col-lg-pullмы можем изменить порядок столбцов на больших экранах и отобразить боковую панель слева и основной контент справа.

Рабочая скрипка здесь .

Обновлено 2018

Для первоначального вопроса, основанного на Bootstrap 3 , решением было использование push-pull .

В Bootstrap 4 теперь возможно изменить порядок, даже когда столбцы на всю ширину сложены вертикально, благодаря Bootstrap 4 flexbox. В OFC метод push-pull по-прежнему будет работать, но теперь есть другие способы изменить порядок столбцов в Bootstrap 4, что позволяет переупорядочивать столбцы полной ширины.

Метод 1 - Использование flex-column-reverseдля xsэкранов:

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

Метод 2 - Использование order-firstдля xsэкранов:

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

Bootstrap 4 (альфа 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr

Оригинальный 3.x Ответ

Для первоначального вопроса, основанного на Bootstrap 3 , решение заключалось в том, чтобы использовать push-pull для большей ширины, и тогда столбцы покажут их естественный порядок на меньшей (xs) ширине. (AB обратится к BA).

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel

@emre заявил: « Вы не можете изменить порядок столбцов на маленьких экранах, но вы можете сделать это на больших экранах ». Тем не менее, это должно быть разъяснено, чтобы заявить: «Вы не можете изменить порядок полноразмерных « сложенных »столбцов ..» в Bootstrap 3.

Здесь ответы работают только для 2 ячеек, но как только в этих столбцах будет больше столбцов, это может немного усложнить задачу. Я думаю, что нашел обобщенное решение для любого количества ячеек в нескольких столбцах.

#Goals Получите вертикальную последовательность тегов на мобильном устройстве, чтобы расположить их в любом порядке, который требуется для дизайна на планшете / рабочем столе. В этом конкретном примере один тег должен войти в поток раньше, чем обычно, а другой - позже, чем обычно.

## Mobile

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

## Tablet +

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

Таким образом, заголовок должен перетасовываться прямо на планшете +, и технически, так же, как и desc - он находится над тегом заголовка, который предшествует ему на мобильном телефоне. Вы увидите, что через 4 заголовка тоже проблема.

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

Как и во всех проблемах с Bootstrap Grid, шаг 1 состоит в том, чтобы понять, что HTML должен быть в мобильном порядке, 1 2 3 4 5, на странице. Затем определите, как заставить планшет / рабочий стол переупорядочивать себя таким образом - в идеале без Javascript.

Решение встать 1 headlineи 3 qtyсесть направо, а не слева - просто установить их обоих pull-right. Это касается CSS float: right, то есть они находят первое открытое пространство, которое им подходит. Вы можете думать, что CSS-процессор браузера работает в следующем порядке: 1 вписывается в правый верхний угол. 2 следующий и обычный ( float: left), поэтому он идет в верхний левый угол. Затем 3, что float: rightтак, что он прыгает под 1.

Но этого решения было недостаточно для 4 captions; потому что правые 2 ячейки настолько короткие, 2 imageчто слева, как правило, длиннее, чем обе они вместе взятые. Bootstrap Сетка является прославленным поплавок хак, смысл 4 caption есть float: left. С 2 imagesзанимать столько места слева, 4 captionпопытки вписаться в следующем доступном пространстве - часто в правой колонке, а не левую , где мы хотели.

Решение здесь (и в более общем плане для любой проблемы, подобной этой) состояло в том, чтобы добавить хак-тег, скрытый на мобильном телефоне, который существует на планшете +, чтобы вытолкнуть заголовок, который затем покрывается отрицательным полем - вот так:

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 captions][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

HTML:

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS:

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

Итак, обобщенным решением здесь является добавление хак-тегов, которые могут исчезнуть на мобильном телефоне. На планшете + хак, теги позволяют отображаемым тегам появляться раньше или позже в потоке, а затем подтягиваются или опускаются, чтобы скрыть эти теги взлома.

Примечание: я использовал фиксированную высоту для простого примера в связанном jsfiddle, но фактическое содержание сайта, над которым я работал, варьируется по высоте во всех 5 тегах. Он отображается правильно с относительно большой разницей в высотах тегов, особенно изображения и изображения.

Примечание 2: В зависимости от вашего макета у вас может быть достаточно последовательный порядок столбцов на планшете + (или с более высоким разрешением), чтобы вы могли избежать использования взломанных тегов, используя margin-bottomвместо этого, например, так:

Примечание 3: здесь используется Bootstrap 3. Bootstrap 4 использует другой набор сетки и не будет работать с этими примерами.

http://jsfiddle.net/b9chris/52VtD/16632/

Октябрь 2017

Я хотел бы добавить другое решение Bootstrap 4. Тот, который работал для меня.

Свойство CSS «Порядок» в сочетании с медиа-запросом можно использовать для изменения порядка столбцов, когда они располагаются на меньших экранах.

Что-то вроде этого:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

Ссылка CodePen: https://codepen.io/preston206/pen/EwrXqm

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

Я свяжу это с вопросом оригинального постера. С помощью CSS можно ориентировать навигационную панель, боковую панель и контент, а затем применять свойства порядка в медиа-запросе.

В Bootstrap 4 , если вы хотите сделать что-то вроде этого:

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

Вы должны изменить порядок B , то C затем применить order-{breakpoint}-firstк B . И примените две разные настройки, одна из которых заставит их использовать одни и те же столбцы, а другая заставит их принять всю ширину из 12 столбцов:

• Меньшие экраны: от 12 до B и от 12 до C

• Большие экраны: 12 столбцов между суммами из них ( B + C = 12)

Как это

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

Демо: https://codepen.io/anon/pen/wXLGKa

Это довольно легко с jQuery, используя insertAfter () или insertBefore ().

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

Так просто

если вы хотите установить o условие для мобильных устройств, вы можете сделать это так

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

пример https://jsfiddle.net/w9n27k23/

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

Примеры здесь:

http://jsbin.com/wulexiq/edit?html,css,output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>