Bootstrap right Столбец сверху на мобильном представлении

У меня есть страница Bootstrap:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

Похож:

-----
|A|B|
-----

Итак, если я смотрю на него на мобильном устройстве, столбец A находится сверху, но я хочу, чтобы B был сверху. Это возможно? Я попробовал это с нажатием, но это не сработало.

Ответы

Ответ 1

Используйте Порядок столбцов, чтобы выполнить это. Также см. эту статью о заказе столбцов

col-md-push-6 будет "толкать" столбец вправо 6, а col-md-pull-6 "потянет" столбец влево на "md" или больше портов просмотра. На каких-либо меньших портах просмотра столбцы будут в нормальном порядке снова.

Я думаю, что отбрасывает людей, заключается в том, что вам нужно поставить B выше A в свой HTML. Может быть другой способ сделать это, когда A может идти выше B в HTML, но я не уверен, как это сделать...

DEMO

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

view-port >= md

|A|B|

view-port < мкр

|B|
|A|

Ответ 2

Стоит отметить, что если вы используете столбцы, которые не равны 6, то сумма push не будет равна начальному размеру столбца.

Если у вас есть 2 столбца (A и B) и хотите, чтобы столбец A был меньше и справа на "sm" или больше видовых экранов, но поверх видового экрана мобильного (xs), вы использовали бы следующее:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

В противном случае выравнивание столбцов будет отключено.

Ответ 3

Flexbox Направление

Для Bootstrap 4 примените одно из следующих к вашему .row div:

.flex-row-reverse

Для чувствительных настроек:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

Ответ 4

Ниже приведен код для меня

.row {
    display: flex;
    flex-direction: column-reverse;
}

Ответ 5

Теперь это делается (в Bootstrap v4) путем добавления классов order- #.

См. Https://getbootstrap.com/docs/4.1/migration/#grid-system-1.

Как это:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

Ответ 6

В Bootstrap 4, допустим, вы хотите иметь один заказ для больших экранов и другой порядок для небольших экранов:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

Вы можете опустить order-1 и order-2 выше. Просто добавлено для ясности. Порядок по умолчанию будет порядок, в котором столбцы появляются в HTML.

Для получения дополнительной информации https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Ответ 7

Я использовал:

.row {
   display: flex;
   flex-direction: row-reverse;
}

Ответ 8

В Bootstrap V4 (выпущено 18 января 2018 г.) можно использовать классы переупорядочения. Информация здесь, под вкладкой Изменение порядка.

https://getbootstrap.com/docs/4.0/layout/grid/

Ответ 9

Это сработало для меня на Bootstrap 4:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>