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

цели

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

мобильный

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

планшет+

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

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

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

как и все Bootstrap Задачи сетки Шаг 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-это прославленный float hack, что означает 4 caption и float: left. С 2 image занимая столько места слева,4 caption пытается вписаться в следующий доступное пространство-часто правая колонка, а не левая, где мы этого хотели.

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

[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; }
}

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

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

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

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

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

Обновлено 2018

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

<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.

---

однако, в Bootstrap 4 теперь возможно до измените порядок, даже если столбцы сложены по всей ширине вертикально, благодаря Bootstrap 4 flexbox. ОФК, пушпульный метод будет по-прежнему работать, но теперь есть другие способы изменить порядок столбцов в 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-Использовать flex-first на xs скрины (или order-* в 4.0.0):

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

Bootstrap 4 (alpha 6):http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.0.0: https://www.codeply.com/go/e0v77yGtcr

октября 2017

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

свойство CSS "Order" в сочетании с медиа-запросом может использоваться для изменения порядка столбцов, когда они складываются в меньшие экраны.

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

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

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

вот примеры:

http://jsbin.com/wulexiq/edit?html, css, выход

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

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

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

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

• меньшие экраны: 12 cols to B и 12 cols к C

• большие экраны: 12 cols между суммой из них (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/