Ответ 1

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

Измените порядок столбцов.

<!--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, мы можем изменить порядок столбцов на больших экранах и отобразить боковую панель слева и основное содержимое справа.

Работаем скрипку здесь.

Ответ 2

Обновлено 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.

Ответ 3

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

цели

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

мобильный

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

Tablet+

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

Таким образом, заголовок должен перетасовываться прямо на Tablet+, и технически, так же как и 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 caption; потому что правые 2 ячейки такие короткие, 2 image слева имеет тенденцию быть длиннее, чем обе они вместе взятые. Bootstrap Grid - это прославленный поплавок, означающий, что 4 caption float: left. 2 image занимают столько места слева, 4 caption пытаются вписаться в следующее доступное пространство - часто в правую колонку, а не в левую, где мы ее хотели.

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

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][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; }
}

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

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

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

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

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

Ответ 4

Октябрь 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 можно настраивать навигационную панель, боковую панель и контент, а затем заказывать свойства, применяемые в запросе на медиа.

Ответ 5

В 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

Ответ 6

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

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

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>

Ответ 7

Это довольно просто с помощью jQuery с помощью insertAfter() или insertBefore().

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

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