Bootstrap Kolom kanan di atas pada tampilan seluler

Saya memiliki Halaman Bootstrap seperti ini:

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

Seperti:

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

Jadi jika saya melihatnya di Perangkat seluler, Kolom A di atas, tapi saya ingin B di atas. Apakah ini mungkin? Saya mencobanya dengan dorongan, tetapi tidak berhasil.

Gunakan pemesanan Kolom untuk mencapai ini.

col-md-push-6akan "mendorong" kolom ke kanan 6 dan col-md-pull-6akan "menarik" kolom ke kiri pada "md" atau port tampilan yang lebih besar. Pada port tampilan yang lebih kecil, kolom akan berada dalam urutan normal lagi.

Saya pikir apa yang membuat orang kecewa, adalah Anda harus meletakkan B di atas A dalam HTML Anda . Mungkin ada cara berbeda untuk melakukan ini di mana A bisa pergi di atas B dalam HTML, tapi saya tidak yakin bagaimana melakukannya ...

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|

Perlu dicatat bahwa jika Anda menggunakan kolom yang tidak sama dengan 6, maka jumlah push tidak akan sama dengan ukuran kolom awal.

Jika Anda memiliki 2 kolom (A & B) dan berharap agar kolom A lebih kecil dan ke kanan di "sm" atau lebih besar viewports, tetapi di atas viewport seluler (xs), Anda akan menggunakan yang berikut:

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

Kalau tidak, perataan kolom akan tampak tidak aktif.

Arah Flexbox

Untuk Bootstrap 4, terapkan salah satu dari yang berikut ini ke div .row Anda:

.flex-row-reverse

Untuk pengaturan responsif:

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

Di Bootstrap 4, misalkan Anda ingin memiliki satu pesanan untuk layar besar dan urutan berbeda untuk layar yang lebih kecil:

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

Anda dapat menghilangkan order-1dan ke order-2atas. Baru ditambahkan untuk kejelasan. Urutan default adalah urutan kolom yang muncul di html.

Untuk info lebih lanjut https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Kode di bawah ini berfungsi untuk saya

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

Ini sekarang dilakukan (di Bootstrap v4) dengan menambahkan kelas order- #.

Lihat https://getbootstrap.com/docs/4.1/migration/#grid-system-1

Seperti ini:

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

Saya punya tiga bootstrap 4 kolom dengan ukuran berbeda. Ketika layar semakin kecil kolom ketiga disembunyikan, maka ketika layar semakin kecil dan divs ditumpuk perubahan urutan sehingga kolom 2 berada di atas.

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

Saya harap ini membantu. Saya merasa sulit untuk memahami hal ini tetapi akhirnya sampai di sana dengan bantuan utas ini, tetapi sedikit terbentur dan hilang.

Ini bekerja untuk saya di 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>

Saya menggunakan:

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

Di Bootstrap V4 (Dirilis 18 Januari 2018) Anda dapat menggunakan Reordering Classes. Info di sini di bawah tab Reordering.

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

Bootstrap 4 termasuk kelas untuk flex. Lihat: 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>