Membalik Urutan Objek Terakhir menjadi Awal dengan CSS Flex Direction

Reverse Element Order with CSS Flexbox - Pada Tutorial ini saya akan menjelaskan bagaimana Cara membalik Urutan Elemen Terakhir menjadi Elemen Pertama

Apabila sobat masih bingung apa yang saya maksud, sebagai gambaran apabila saya punya kode HTML sepeti ini:

<ol>
  <li>Elemen Pertama</li>
  <li>Elemen Kedua</li>
  <li>Elemen Ketiga</li>
  <li>Elemen Keempat</li>
</ol>

maka hasilnya akan seperti ini

1. Elemen Pertama
2. Elemen Kedua
3. Elemen Ketiga
4. Elemen Keempat

Untuk membalik urutan, kita akan menggunakan CSS Flex-Direction

Cara Membalik Objek / Elemen dengan Flex Direction

Pertama, kita harus buat class atau id untuk flex-direction

.balik {display: flex;flex-direction: column-reverse;}

Untuk elemen yang sejajar gunakan CSS

.balik-sejajar {display: flex;flex-direction: row-reverse;}

Kedua, pada HTML kita tambahkan class / id. Hal ini berlaku tidah hanya pada ol, intinya bisa digunakan pada emen pembungkus. Misal :

<div class="balik">
  <div>Elemen Pertama</div>
  <div>Elemen Kedua</div>
  <div>Elemen Ketiga</div>
  <div>Elemen Keempat</div>
</div>

Demo Column Demo Row

Penutup

Mungkin dari beberapa sobat bertanya: Untuk apa sih pake CSS ini? Udah aja buat HTMLnya dari urutan terakhir. Memang idealnya seperti itu, hal ini berawal dari ide saya Membuat Komentar Terbaru di urutan Teratas pada Komentar Blogger, sekaligus juga Memindahkan Kotak Komentar Blogger, menjadi di atas Komentar. Hal ini saya lanjutkan di Corkismet, karena demonya sekaligus di sana. Selamat Mengunjungi!