Bagaimanakah Saya Boleh Menukar Susunan Dua DIV Menggunakan CSS Sahaja?

Menukar Kedudukan DIV Menggunakan CSS Tulen

Dalam reka bentuk responsif, penyusunan elemen secara dinamik boleh menjadi penting. Jika anda mencari cara untuk menukar kedudukan dua div semata-mata melalui CSS, berikut ialah penyelesaian yang diilhamkan oleh pertanyaan serupa:

Struktur Asal:

<div>

Hasil yang Diingini:

Mempunyai "second_div" muncul sebelum "first_div" tanpa mengubah HTML.

Penyelesaian:

Laksanakan pertanyaan media berikut untuk menyasarkan yang diperlukan konteks:

@media (max-width: 30em) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .container .first_div {
    order: 2;
  }

  .container .second_div {
    order: 1;
  }
}

Penjelasan:

• Pertanyaan media menyasarkan peranti dengan lebar maksimum 30em, secara berkesan membolehkan tingkah laku responsif.
• Dalam elemen bekas, kami menetapkan paparan kepada 'flex', yang menyokong susunan elemen secara mendatar.
• Kami menentukan arah lentur sebagai 'lajur' untuk menjajarkan div secara menegak.
• item selaras: mula-lentur; memastikan elemen bermula dari permulaan bekas.
• Kunci untuk menukar kedudukan div adalah melalui sifat 'pesanan'. Dengan menetapkan perintah: 2; pada .first_div, kami mengarahkan penyemak imbas untuk memaparkannya selepas elemen lain dengan susunan yang lebih tinggi. Sebaliknya, perintah: 1; pada .second_div meletakkannya sebelum .first_div.

Pendekatan ini membolehkan pertukaran kedudukan DIV yang lancar menggunakan CSS sahaja, dengan berkesan menangani pertanyaan awal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Susunan Dua DIV Menggunakan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!