Bagaimana cara mengubah urutan kolom Bootstrap 3 pada tata letak seluler?

Saya membuat tata letak responsif dengan navbar tetap teratas. Di bawahnya saya memiliki dua kolom, satu untuk sidebar (3), dan satu untuk konten (9). Yang di desktop terlihat seperti ini

navbar
[3] [9]

Ketika saya resizeke ponsel navbardikompresi dan disembunyikan, maka bilah sisi ditumpuk di atas konten, seperti ini:

navbar
[3]
[9]

Saya ingin konten utama di bagian atas, jadi saya perlu mengubah urutan di ponsel ke ini:

navbar
[9]
[3]

Saya menemukan artikel ini yang mencakup poin yang sama, tetapi jawaban yang diterima telah diedit untuk mengatakan bahwa solusi tidak berlaku untuk versi Bootstrap saat ini.

Bagaimana saya bisa memesan ulang kolom ini di ponsel? Atau sebagai alternatif, bagaimana saya bisa memasukkan grup daftar sidbar ke navbar saya yang mengembang?

Ini kode saya:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

Anda tidak dapat mengubah urutan kolom di layar yang lebih kecil tetapi Anda bisa melakukannya di layar besar.

Jadi ubah urutan kolom Anda.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

Secara default ini menampilkan konten utama terlebih dahulu.

Jadi dalam konten utama seluler ditampilkan terlebih dahulu.

Dengan menggunakan col-lg-pushdan col-lg-pullkita dapat menyusun ulang kolom di layar besar dan menampilkan sidebar di sebelah kiri dan konten utama di sebelah kanan.

Biola yang bekerja di sini .

Diperbarui 2018

Untuk pertanyaan awal berdasarkan Bootstrap 3 , solusinya adalah menggunakan push-pull .

Di Bootstrap 4 sekarang mungkin untuk mengubah urutan, bahkan ketika kolom ditumpuk penuh secara vertikal, berkat flexstr Bootstrap 4. OFC, metode tarikan dorong masih akan berfungsi, tetapi sekarang ada cara lain untuk mengubah urutan kolom di Bootstrap 4, sehingga memungkinkan untuk memesan kembali tatanan kolom lebar penuh.

Metode 1 - Gunakan flex-column-reverseuntuk xslayar:

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

Metode 2 - Gunakan order-firstuntuk xslayar:

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

Bootstrap 4 (alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr

Asli 3.x Jawab

Untuk pertanyaan awal berdasarkan Bootstrap 3 , solusinya adalah menggunakan push-pull untuk lebar yang lebih besar, dan kemudian kolom akan menunjukkan urutan alami mereka pada lebar yang lebih kecil (xs). (AB balik ke BA).

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel

@emre menyatakan, " Anda tidak dapat mengubah urutan kolom di layar yang lebih kecil tetapi Anda bisa melakukannya di layar besar ". Namun, ini harus diklarifikasi untuk menyatakan: "Anda tidak dapat mengubah urutan kolom" ditumpuk " lebar penuh .." di Bootstrap 3.

Jawaban di sini hanya berfungsi untuk 2 sel, tetapi segera setelah kolom-kolom tersebut memiliki lebih banyak di dalamnya, hal itu dapat menyebabkan kompleksitas yang lebih sedikit. Saya pikir saya telah menemukan solusi umum untuk sejumlah sel dalam beberapa kolom.

# Gol Dapatkan urutan vertikal tag di ponsel untuk mengatur diri mereka sendiri dalam urutan apa pun yang dibutuhkan desain di tablet / desktop. Dalam contoh konkret ini, satu tag harus masuk lebih cepat dari biasanya, dan satu lagi lebih lambat dari biasanya.

## Mobile

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

## Tablet +

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

Jadi tajuk utama perlu diacak tepat di tablet +, dan secara teknis, begitu juga desc - itu berada di atas tag caption yang mendahuluinya di ponsel. Anda akan melihat dalam waktu 4 teks juga bermasalah

Mari kita asumsikan setiap sel dapat bervariasi dalam ketinggian, dan harus rata dari atas ke bawah dengan sel berikutnya (mengesampingkan trik yang lemah seperti meja).

Seperti semua masalah Bootstrap Grid, langkah 1 adalah untuk menyadari bahwa HTML harus dalam urutan seluler, 1 2 3 4 5, di halaman. Lalu, tentukan cara mendapatkan tablet / desktop untuk menyusun ulang sendiri dengan cara ini - idealnya tanpa Javascript.

Solusi untuk mendapatkan 1 headlinedan 3 qtyduduk di sebelah kanan, bukan ke kiri adalah dengan mengatur keduanya pull-right. Ini menggunakan CSS float: right, artinya mereka menemukan ruang terbuka pertama yang cocok untuk mereka. Anda dapat memikirkan prosesor CSS peramban yang bekerja dalam urutan berikut: 1 pas ke sudut kanan atas. 2 adalah berikutnya dan reguler ( float: left), jadi pergi ke sudut kiri atas. Kemudian 3, yang float: rightdemikian itu melompat di bawah 1.

Tetapi solusi ini tidak cukup untuk 4 captions; karena 2 sel kanan sangat pendek 2 imagedi sebelah kiri cenderung lebih panjang dari gabungan keduanya. Bootstrap Grid adalah float hack dimuliakan, artinya 4 caption adalah float: left. Dengan 2 imagesmenempati begitu banyak ruang di sebelah kiri,4 caption upaya untuk menyesuaikan dengan ruang yang tersedia berikutnya - seringkali kolom kanan, bukan sebelah kiri tempat yang kita inginkan.

Solusi di sini (dan lebih umum untuk masalah seperti ini) adalah menambahkan tag hack, disembunyikan di ponsel, yang ada di tablet + untuk mendorong caption keluar, yang kemudian ditutupi oleh margin negatif - seperti ini:

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 captions][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

HTML:

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS:

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

Jadi, solusi umum di sini adalah menambahkan tag hack yang dapat menghilang di ponsel. Pada tablet + retasan, tag memungkinkan tag yang ditampilkan muncul lebih awal atau lebih lambat dalam alur, lalu ditarik ke atas atau ke bawah untuk menutupi tag hack tersebut.

Catatan: Saya telah menggunakan ketinggian tetap demi contoh sederhana di jsfiddle yang ditautkan, tetapi konten situs aktual yang saya kerjakan bervariasi tingginya di semua 5 tag. Ini menghasilkan dengan benar dengan varians yang relatif besar di ketinggian tag, terutama gambar dan desc.

Catatan 2: Bergantung pada tata letak Anda, Anda mungkin memiliki urutan kolom yang cukup konsisten pada tablet + (atau resolusi yang lebih besar), sehingga Anda dapat menghindari penggunaan tag hack, menggunakan margin-bottomsebaliknya, seperti:

Catatan 3: Ini menggunakan Bootstrap 3. Bootstrap 4 menggunakan set grid yang berbeda, dan tidak akan bekerja dengan contoh-contoh ini.

http://jsfiddle.net/b9chris/52VtD/16632/

Oktober 2017

Saya ingin menambahkan solusi Bootstrap 4 lainnya. Salah satu yang bekerja untuk saya.

Properti "Pesan" CSS, dikombinasikan dengan kueri media, dapat digunakan untuk memesan ulang kolom saat ditumpuk di layar yang lebih kecil.

Sesuatu seperti ini:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

Tautan CodePen: https://codepen.io/preston206/pen/EwrXqm

Sesuaikan ukuran layar dan Anda akan melihat kolom ditumpuk dalam urutan yang berbeda.

Saya akan mengikat ini dengan pertanyaan poster asli. Dengan CSS, navbar, bilah sisi, dan konten dapat ditargetkan dan kemudian memesan properti yang diterapkan dalam kueri media.

Di Bootstrap 4 , jika Anda ingin melakukan sesuatu seperti ini:

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

Anda perlu membalik urutan B maka C kemudian menerapkan order-{breakpoint}-firstke B . Dan terapkan dua pengaturan berbeda, satu yang akan membuat mereka berbagi cols yang sama dan lainnya yang akan membuat mereka mengambil lebar penuh dari 12 cols:

• Layar yang lebih kecil: 12 cols ke B dan 12 cols ke C

• Layar lebih besar: 12 cols di antara jumlah mereka ( B + C = 12)

Seperti ini

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

Demo: https://codepen.io/anon/pen/wXLGKa

Ini cukup mudah dengan jQuery menggunakan insertAfter () atau insertBefore ().

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

Sesederhana itu

jika Anda ingin menetapkan kondisi untuk perangkat seluler Anda dapat membuatnya seperti ini

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

contoh https://jsfiddle.net/w9n27k23/

Dimulai dengan versi seluler terlebih dahulu, Anda dapat mencapai apa yang Anda inginkan, sebagian besar waktu.

Contoh di sini:

http://jsbin.com/wulexiq/edit?html,css ,output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>