Bagaimanakah Saya Boleh Menyusun Semula Elemen Sekat HTML Menggunakan Hanya CSS dan Pertanyaan Media?

Menyusun Semula Elemen Blok dengan CSS

Matlamat anda adalah untuk menyusun semula susunan elemen blok HTML menggunakan CSS sahaja sambil mengekalkan kesan "tolak" daripada paparan: menyekat harta.

Pertanyaan Media CSS untuk Mudah Alih Pengoptimuman

Untuk memenuhi keperluan pengguna mudah alih, anda boleh menggunakan pertanyaan media CSS untuk mengubah suai susunan blok berdasarkan saiz skrin:

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* Add CSS rules to change the order here */
   }
}

Contoh Pelaksanaan

Untuk menunjukkan, pertimbangkan perkara berikut contoh:

<div>
<p>Dengan menambahkan peraturan CSS berikut pada pertanyaan media, anda boleh menukar susunan blok untuk skrin mudah alih:</p>
<pre class="brush:php;toolbar:false">@media only screen and (max-device-width: 480px) {
   #blockC {
      order: 1;
   }

   #blockA {
      order: 2;
   }

   #blockB {
      order: 3;
   }
}

Manipulasi Pesanan dengan Flexbox

Untuk penyelesaian yang lebih serba boleh, anda boleh menggunakan Flexbox sifat:

<div>
<pre class="brush:php;toolbar:false">@media screen and (max-width:300px) {
   #parent{
      display:flex;
      flex-flow: column;
   }

   #a{order:2;}
   #c{order:1;}
   #b{order:3;}
}

Pendekatan ini membolehkan anda menukar susunan unsur dengan mengubah suai sifat tertib dalam pertanyaan media. Sifat flex-flow: lajur memastikan elemen disusun secara menegak pada skrin yang lebih kecil.