Program Reordering Classes dalam Bootstrap

Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membuat Reordering Classes dalam Bootstrap.

Sumber : Getbootstrap.com

Gunakan kelas .order- untuk mengontrol urutan visual konten Anda. Kelas-kelas ini responsif, sehingga Anda dapat menetapkan urutan berdasarkan breakpoint (contohnya, .order-1.order-md-2). Ini mencakup dukungan untuk angka 1 hingga 12 di semua 5 (Lima) tingkatan grid.

<div class="container">
    <div class="row">
        <div class="col">Pertama, tapi tidak berurutan</div>
        <div class="col order-12">Kedua, tapi terakhir</div>
        <div class="col order-1">Ketiga, tapi yang pertama</div>
    </div>
</div>

Hasil :

Terdapat juga kelas responsif .order-first dan .order-last yang mengubah urutan elemen dengan menerapkan order: -1 dan order: 13 (order: $columns + 1) secara berturut-turut. Kelas-kelas ini juga dapat dicampuradukkan dengan kelas-kelas bernomor .order-* sesuai kebutuhan.

<div class="container">
    <div class="row">
        <div class="col order-last">Pertama, tapi terakhir</div>
        <div class="col">Kedua, tapi tidak berurutan</div>
        <div class="col order-first">Ketiga, tapi yang pertama</div>
    </div>
</div>

Hasil :

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)