Pertimbangkan kod html saya berikut
<html>
<head>
</head>
<body>
<div class="wrapper">
<section class="first">第一内容</div>
<section class="second">第二内容</div>
<section class="third">第三内容</div>
</div>
</body>
</html>
Apa yang saya perlukan ialah memaparkan kandungan ketiga di atas paparan pelayar dengan menukar nama kelas dan bukannya menukar kedudukan dalam html Pada masa yang sama, perubahan harus kekal responsif.
Kod html saya adalah seperti berikut
<div class="wrapper">
<section class="third">第一内容</section>
<section class="second">第二内容</section>
<section class="first">第三内容</section>
</div> 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya akan menggunakan sistem grid dan pesanan. Kemudian gunakan js untuk menukar nombor urutan supaya div ketiga menjadi yang pertama. Adakah anda fikir ini mungkin penyelesaian untuk anda?
Anda boleh mendapatkan maklumat lanjut di sini: https://developer.mozilla.org/en-US/docs/Web/CSS/order
.wrapper{ display: grid; } .first{ order: 1; } .second{ order: 2; } .third{ order: 3; }Kemudian anda boleh menggunakan JS untuk menukar nombor urutan
.wrapper{ display: flex; flex-flow: column; } .first{ order: 3; } .second{ order: 2; } .third{ order: 1; }<html> <head> </head> <body> <div class="wrapper"> <section class="first">First Content</section> <section class="second">Second Content</section> <section class="third">ThirdContent</section> </div> </body> </html>