Halo teman-teman Dumet School, kembali lagi dengan saya di kursus web design. Kali ini saya akan membahas tentang cara Memanfaatkan Column Ordering Pada Bootstrap 3. Dimana fungsi dari column ordering pada bootstrap 3 dapat mengubah suatu urutan kolom grid internal dengan menggunakan  class .col-md-push-* dan .col-md-pull-*.

Untuk dapat Memanfaatkan Column Ordering Pada Bootstrap 3 kita buat struktur htmlnya terlebih dahulu sebagai berikut.Teman-teman bisa langsung saja salin di halaman getbootstrap.com untuk mendapatkan struktur dasar htmlnnya. Lalu teman-teman tinggal pilih offline atau online untuk menggunakan bootstrapnya. Kebetulan disini saya online ya menggunakan bootstrapnya. Jadi tidak perlu download file bootstrapnya. Berikut kode htmlnya.

Nah jika sudah jangan lupa teman-teman simpan terlebih dahulu dengan format html. Sebelum kita jalankan di browser, teman-teman bisa perhatikan class .col-md-push-* dan .col-md-pull-* dimana class ini berfungsi untuk mengubah urutan grid. Ketika di layar xs atau versi mobile maka urutan gridnya akan bertukar tempat. Dan pada saat di layar medium maka akan sesuai dengan urutan gridnya yang asli.

Oke langsung saja teman-teman bisa langsung jalankan di browser masing-masing. Jika di jalankan di browser masing-masing maka akan tampak seperti pada gambar di bawah ini perubahannya.

Memanfaatkan Column Ordering Pada Bootstrap 3

Lalu urutan grid akan berubah seperti pada gambar di bawah ini.

Memanfaatkan Column Ordering Pada Bootstrap 3

Demikian artikel tentang cara Memanfaatkan Column Ordering Pada Bootstrap 3. Sampai jumpa di pembahasan selanjutnya ya teman-teman. Semoga artikel ini bisa bermanfaat dan menambah ilmu baru buat teman-teman. Selamat mencoba teman-teman.

WhatsApp chat