Bagaimanakah CSS Flexbox Boleh Menyelesaikan Isu Penyusunan Semula Div Responsif pada Mudah Alih?

<div>

CSS:

.container {
    display: flex;
    flex-wrap: wrap;
}

.div1 {
    order: 2;
}

.div2 {
    order: 4;
}

.div3 {
    order: 1;
}

.div4 {
    order: 3;
}

@media screen and (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

Penjelasan:

• The paparan: sifat flex mendayakan flexbox pada bekas.
• Balut fleksibel: balut membenarkan elemen untuk membalut pada berbilang baris.
• Sifat pesanan menetapkan susunan susunan elemen pada skrin yang lebih kecil.
• Pertanyaan @media menggunakan reka letak lajur untuk saiz skrin yang lebih kecil.

Penyelesaian ini mempertimbangkan kekangan yang dinyatakan, menghasilkan unsur tersusun semula yang mengekalkan saiz dan pembendungannya dalam bekas induk.

Atas ialah kandungan terperinci Bagaimanakah CSS Flexbox Boleh Menyelesaikan Isu Penyusunan Semula Div Responsif pada Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!