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

171

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

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

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

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

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

schnawel007
источник
2
Для Bootstrap 4 см. Ответ salmanhijazi
schnawel007

Ответы:

268

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

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|
Schmalzy
источник
6
@JackTheKnife Посмотрите на другой ответ на этот вопрос ... вы толкаете или вытягиваете столбец на ширину другого столбца.
Schmalzy
1
@ Schmalzy O да - другой ответ имеет лучшее объяснение. Также было найдено, что это полезно: scotch.io/tutorials/reorder-css-columns-using-bootstrap
JackTheKnife
1
Возникли проблемы с тремя столбцами, где порядок стека должен быть по центру, слева, справа.
Гусь
78

Стоит заметить, что если вы используете столбцы, которые не равны 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>

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

apritch
источник
Как я могу использовать это, когда у меня есть набор смещения<div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>
Muddasir Abbas
29

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

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

.flex-row-reverse

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

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
salmanhijazi
источник
Есть идеи, как добиться того же в vuetify?
Ракибул Хак
11

В 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

Аврам
источник
10

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

.row {
    display: flex;
    flex-direction: column-reverse;
}
Меч I
источник
4

У меня три бутстрапа 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>

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

M61Vulcan
источник
3

Это сработало для меня на 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>
гробница
источник
2

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

.row {
   display: flex;
   flex-direction: row-reverse;
}
Эрик Коннер
источник
0

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

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

Хуан Мирелес II
источник