Бутстрэп справа колонка сверху на мобильном вид

У меня есть страница начальной загрузки, как это:

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

Выглядит как:

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

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

Используйте порядок столбцов для достижения этой цели.

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

Я думаю, что отталкивает людей, это то , что вы должны поместить 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|

порт просмотра <md

|B|
|A|

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

Если у вас есть 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>

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

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

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

.flex-row-reverse

Для адаптивных настроек:

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

В 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

Приведенный ниже код работает для меня

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

Теперь это делается (в 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>

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

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

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

Это сработало для меня на 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>

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

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

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

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

Bootstrap 4 включает в себя классы для flex. Смотрите: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>