Fungsi Column Ordering Pada Bootstrap 3

Hallo teman-teman DUMET School ketemu lagi dengan saya, pada tutorial kali ini saya akan menjelaskan fungsi dari Column Ordering pada Bootstrap 3. Pada Tutorial sebelumnya saya juga sudah menjelaskan fungsi Offsetting Columns pada Bootstrap 3. Nah fungsi dari Column Ordering adalah memungkinkan kita untuk mengubah urutan system grid berdasarkan ukuran layar. Jadi maksudnya adalah pada layar berukuran besar kalian dapat memiliki kotak yang berbeda dari pada layar ponsel.

Sebagai contoh saya memiliki 3 kolom 1, 2, dan 3 pada layar ukuran besar. Nah misalkan kita membuka contoh tersebut pada ukuran layar ponsel maka kolom 2 akan berada di baris paling atas sedangkan kolom 1 dan 3 akan berada sejajar tepat di bawahnya kolom 2, berikut contohnya :

Dekstop

Mobile

Berikut adalah HTML dari fungsi Column Ordering

Pada contoh di atas jika kita buka tampilan tersebut di perangkat mobile maka kolom 2 akan berada di atas kolom 1 dan 3. Untuk membuat hal seperti itu kalian bisa gunakan class .col-xs-x, .col-sm-x, .col-md-x, .col-lg-x, dan tambahkan juga class .col-xx-push-x dan .col-xx-pull-x seperti contoh di atas.

Itulah bagaimana fungsi Column Ordering bekerja pada Bootstrap 3. Sekian dulu tutorial dari saya sampai ketemu di tutorial berikutnya Terima Kasih.

Demo

14 Februari 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat