Правий стовпчик завантажувального стовпця вгорі на мобільному поданні

У мене є сторінка завантаження на зразок такої:

<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" або більших портах перегляду. На будь-яких менших портах перегляду стовпці знову будуть у звичайному порядку.

Я думаю, що те, що відкидає людей, - це те, що ви повинні поставити 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 <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 застосуйте до свого divrow div одне з наступних:

.flex-row-reverse

Для чутливих налаштувань:

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

Наведений нижче код працює для мене

.row {
    display: flex;
    flex-direction: column-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

Це зараз робиться (у Bootstrap v4), додаючи класи № класів.

Дивіться 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 включає заняття з флексу. Дивіться: 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>