Program Membuat Order dalam Bootstrap

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

Sumber : Getbootstrap.com

Ubah urutan visual item fleksibel tertentu dengan sejumlah utilitas urutan. Kami hanya menyediakan opsi untuk membuat item pertama atau terakhir, serta pengaturan ulang untuk menggunakan urutan DOM. Karena urutan mengambil nilai integer apa pun (misalnya, 5), tambahkan CSS Kustom untuk nilai tambahan yang dibutuhkan.

<div class="d-flex flex-nowrap">
    <div class="order-3 p-2">Item Flex Pertama</div>
    <div class="order-2 p-2">Item Flex Kedua</div>
    <div class="order-1 p-2">Item Flex Ketiga</div>
</div>

Variasi responsif juga ada untuk Urutan (Order).

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

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

Terima Kasih 😀😊😘👌👍 :)