Bagaimanakah Saya Boleh Menyusun Semula Lajur dalam Bootstrap 4 dan 5?

Menyusun Semula Lajur dengan Bootstrap 4

Dalam Bootstrap 4, adalah mungkin untuk menyusun semula lajur menggunakan pelbagai kaedah, bergantung pada kesan dan saiz skrin yang diingini .

Untuk Bootstrap 5 (2021)

Bermula dengan Bootstrap 5, kelas pesanan responsif telah dikemas kini untuk memasukkan pesanan pertama, pesanan terakhir dan pesanan-0 hingga pesanan-5. Kelas ini membolehkan lebih banyak kefleksibelan dalam susunan lajur.

Untuk Bootstrap 4 (2018)

Dalam Bootstrap 4, kelas pesanan responsif termasuk pesanan-dahulu, pesanan-terakhir , dan perintah-0 hingga pesanan-12. Untuk mencapai reka letak 1-3-2 yang diingini pada mudah alih, kelas berikut harus digunakan:

<div class="container">
  <div class="row">
    <div class="col-3 col-md-6">1</div>
    <div class="col-6 col-md-12 order-2 order-md-12">3</div>
    <div class="col-3 col-md-6 order-3">2</div>
  </div>
</div>

Menyesuaikan dengan Flexbox

Flexbox disokong secara asli dalam Bootstrap 4.1 dan kemudian. Ini memberikan lebih kawalan ke atas susunan lajur menggunakan utiliti arah:

<div class="container">
  <div class="row flex-column-reverse flex-md-row">
    <div class="col-md-8">2</div>
    <div class="col-md-4">1st on mobile</div>
  </div>
</div>

Dengan pilihan ini, Bootstrap menawarkan fleksibiliti yang mencukupi untuk menyusun semula lajur berdasarkan saiz skrin dan reka letak yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Semula Lajur dalam Bootstrap 4 dan 5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!