Haloo teman-teman Dumet School, kembali lagi dengan saya shelli ripati. Kali ini saya masih membahas kembali kelas-kelas yang ada di bootstrap 4 Part 1 yang bisa kita manfaatkan untuk membuat sebuah website. Kemarin kita sudah membahas kelas dari bootstrap 4 untuk mengatur column secara vertical alignment dan horizontal alignment. Nah kali ini kita akan bahas tentang Mengenal Class Reordering Pada Bootstrap 4 Part 1.

Kelas ordering pada bootstrap 4 ini berfungsi untuk membantu kita mengatur urutan posisi atau letak dari column dengan menambahkan .order- lalu dilanjut dengan nomor sesuai kebutuhan. Cara mainnya seperti ini ya teman-teman. Misalnya disini saya memberikan .order-5 pada .col-md-6 pertama dan kemudian saya berikan .order-2 pada .col-md-6 kedua maka column yang ada di posisi pertama atau sebelah kiri adalah yang saya berikan .order-2 karena nomornya lebih kecil dari .order-5 seperti itu. Dan yang .order-5 berada di posisi kedua yaitu sebelah kanan.

Nah disini agar lebih Mengenal Class Reordering Pada Bootstrap 4 Part 1 saya akan langsung praktekkan untuk membuat struktur htmlnya. Berikut scriptnya ya teman-teman bisa langsung di salin aja.

Disini saya pakai versi online untuk bootstrap 4 nya ya teman-teman. Kalau teman-teman mau buat versi offline sama saja, teman-teman bisa langsung download di website resminya bootstrap disini get.bootstrap.com. Jika sudah selesai maka teman-teman bisa langsung lihat tampilannya di browser masing-masing. Maka tampilannya akan seperti pada gambar di bawah ini.

Mengenal Class Reordering Pada Bootstrap 4 Part 1

Teman-teman bisa lihat kembali scriptnya dan perhatikan juga hasil tampilannya. Dimana saya memiliki 3 col dalam 1 row dan row pertama di col pertama saya tidak memberikan .order- maka secara default dia akan berada posisinya paling kiri. Lalu di lanjut masih dalam row pertama lalu col kedua disini saya memberikan .order-2 dan col ketiga .order-1 otomatis posisi col ketiga ada di posisi kedua karena .order-1 lebih kecil dari .order-2. Dan row kedua teman-teman bisa analisa sendiri ya.

Demikian artikel tentang Mengenal Class Reordering Pada Bootstrap 4 Part 1. Sampai jumpa di pembahasan part 2, karena saya akan membahas masih tentang kelas reordering pada bootstrap 4.