Bedenken Sie den folgenden HTML-Code
<html>
<head>
</head>
<body>
<div class="wrapper">
<section class="first">第一内容</div>
<section class="second">第二内容</div>
<section class="third">第三内容</div>
</div>
</body>
</html>
Was ich brauche, ist, den dritten Inhalt oben in der Browseransicht anzuzeigen, indem ich den Klassennamen ändere, anstatt die Position im HTML zu ändern Gleichzeitig sollten Änderungen reaktionsfähig bleiben.
Mein HTML-Code lautet wie folgt
<div class="wrapper">
<section class="third">第一内容</section>
<section class="second">第二内容</section>
<section class="first">第三内容</section>
</div> 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我会使用网格系统和顺序。然后使用js来改变顺序号，使第三个div变成第一个。你觉得这对你来说可能是一个解决方案吗？
你可以在这里找到更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/order
.wrapper{ display: grid; } .first{ order: 1; } .second{ order: 2; } .third{ order: 3; }然后你可以使用JS来改变顺序号
.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>