Saya sekarang membaca dokumentasi di Twitter Bootstrap 3, dan mencoba mengikuti pemesanan kolom seperti yang ditunjukkan pada halaman ini tetapi mengenai dinding. Saya tidak mengerti mengapa kode seperti itu bekerja atau bagaimana menentukan pengaturan dengan benar. Yang ingin saya tunjukkan adalah satu kotak, yang terdiri dari panjang 5, dan panjang lainnya 5, dan akhirnya satu panjang 2 kotak.

Jadi milikku adalah seperti ini:

[5] [5] [2]

Dan apa yang ingin saya capai adalah, ketika dilihat di Desktop tata letak di atas ditampilkan, tetapi ketika dilihat di ponsel, saya ingin menunjukkan objek panjang 5 kedua pertama, lalu panjang objek 5 pertama, dan akhirnya objek panjang 2 , Tegak lurus. Seperti ini:

[5] (second)
[5] (first)
[2]  

Sementara saya mencoba mengikuti langkah yang dijelaskan dalam dokumentasi di atas, saya mendapatkan objek dengan panjang 5 pertama di atas yang kedua meskipun berada di platform mobile, yang seperti yang saya katakan harus menampilkan objek dengan panjang 5 kedua di atas. Dengan kata lain, saya mendapatkan ini:

[5] (first)
[5] (second)
[2] 

Jadi bagaimana saya bisa menempatkan yang kedua dengan benar? Atau karena saya menggunakan objek dengan panjang yang sama, bisakah pemesanan kolom tidak berfungsi?

Inilah kode saya untuk informasi Anda:

<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>

Juga, dokumentasi tidak menjelaskan apa pullatau pushartinya. Jadi, apakah saya melewatkan sesuatu?

Terima kasih.

Jawaban ini ada dalam tiga bagian, lihat di bawah untuk rilis resmi (v3 dan v4)

Saya bahkan tidak dapat menemukan kelas col-lg-push-x atau pull di file asli untuk RC1 yang saya unduh, jadi periksa file bootstrap.css Anda. semoga ini adalah sesuatu yang akan mereka urutkan dalam RC2.

Bagaimanapun, kelas col-push-* dan pull memang ada dan ini akan sesuai dengan kebutuhan Anda. Ini demo

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

EDIT: DI BAWAH INI ADALAH JAWABAN UNTUK RELEASE RESMI v3.0

Juga lihat posting blog ini pada subjek

• col-vp-push-x= dorong kolom ke kanan dengan x jumlah kolom, mulai dari tempat kolom biasanya akan me-render -> position: relative, pada vp atau view-port yang lebih besar.

• col-vp-pull-x= tarik kolom ke kiri dengan x jumlah kolom, mulai dari tempat kolom biasanya akan merender -> position: relative, pada vp atau view-port yang lebih besar.

  vp = xs, sm, md, atau lg

  x = 1 sampai 12

Saya pikir apa yang mengacaukan kebanyakan orang, adalah Anda perlu mengubah urutan kolom dalam markup HTML Anda (dalam contoh di bawah, B muncul sebelum A) , dan itu hanya mendorong atau menarik pada view-port yang ada lebih besar atau sama dengan apa yang ditentukan. yaitu col-sm-push-5hanya akan mendorong 5 kolom pada smview-ports atau lebih besar. Ini karena Bootstrap adalah kerangka kerja "seluler pertama", jadi HTML Anda harus mencerminkan versi seluler situs Anda. Dorongan dan Tarik kemudian dilakukan pada layar yang lebih besar.

• (Desktop) Port tampilan yang lebih besar didorong dan ditarik.
• (Ponsel) Port tampilan yang lebih kecil di-render dalam urutan normal.

DEMO

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

Lihat-port> = sm

|A|B|C|

Lihat-port <sm

|B|
|A|
|C|

EDIT: DI BAWAH INI ADALAH JAWABAN UNTUK v4.0

Dengan v4, datanglah flexbox dan perubahan lain pada sistem grid dan kelas push \ pull telah dihapus untuk menggunakan pemesanan flexbox.

• Gunakan .order-*kelas untuk mengontrol tatanan visual (di mana * = 1 hingga 12)
• Ini juga bisa spesifik tingkat grid .order-md-*
• Juga .order-first(-1) dan .order-last(13) tersedia

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

Tarik "menarik" div ke arah kiri browser dan dan Tekan "mendorong" div menjauh dari kiri browser.

Suka:

Jadi pada dasarnya dalam tata letak 3 kolom dari halaman web mana saja, "Main Body" muncul di "Center" dan di "Mobile" lihat "Main Body" muncul di "Top" halaman. Ini sebagian besar diinginkan oleh semua orang dengan tata letak 3 kolom.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

Anda dapat melihatnya di sini: http://jsfiddle.net/DrGeneral/BxaNN/1/

Semoga ini bisa membantu

Kesalahpahaman umum Kesalahpahaman umum dengan pemesanan kolom adalah bahwa, saya harus (atau bisa) melakukan mendorong dan menarik perangkat seluler, dan bahwa tampilan desktop harus ditampilkan sesuai urutan alami markup. Ini salah.

Reality Bootstrap adalah kerangka kerja pertama seluler. Ini berarti bahwa urutan kolom dalam markup HTML Anda harus mewakili urutan yang Anda inginkan ditampilkan pada perangkat seluler. Ini berarti mendorong dan menarik dilakukan pada tampilan desktop yang lebih besar. tidak pada tampilan perangkat seluler ..

Brandon Schmalz - Pengembang Web Stack Lengkap Lihat deskripsi lengkapnya di sini

Saya hanya merasa seperti saya akan menambahkan $ 0,2 untuk 2 jawaban yang bagus itu. Saya memiliki kasus ketika saya harus memindahkan kolom terakhir sampai ke atas dalam situasi 3-kolom.

[A] [B] [C]

untuk

[C]

[SEBUAH]

[B]

Kelas Boostrap .col-xx-push-Xtidak melakukan apa pun selain menekan kolom ke kanan left: XX%; sehingga yang harus Anda lakukan untuk mendorong kolom ke kanan adalah menambahkan jumlah kolom semu ke kiri.

Pada kasus ini:

• dua kolom ( col-md-5dan col-md-3) akan ke kiri, masing-masing dengan nilai yang akan kanan;

• satu ( col-md-4) ke kanan dengan jumlah dari dua yang pertama ke kiri (5 + 3 = 8);

<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

Jika Anda perlu mengatur data dalam kolom 1/2/4 tergantung dari ukuran viewport maka tekan dan tarik mungkin tidak ada pilihan sama sekali. Tidak peduli bagaimana Anda memesan barang Anda di tempat pertama, salah satu ukuran dapat memberi Anda urutan yang salah.

Solusi dalam kasus ini adalah menggunakan baris dan col bersarang tanpa kelas push atau pull.

Contoh

Di XS yang Anda inginkan ...

A
B
C
D
E
F
G
H

Di SM kamu mau ...

A   E
B   F
C   G
D   H

Di MD dan di atas yang Anda inginkan ...

A   C   E   G
B   D   F   H

Larutan

Gunakan elemen anak dua-kolom bersarang di elemen induk dua-kolom di sekitarnya:

Berikut ini cuplikan yang berfungsi:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

Keindahan lain dari solusi ini adalah, bahwa item muncul dalam kode dalam urutan alami mereka (A, B, C, ... H) dan tidak harus dikocok, yang bagus untuk generasi CMS.