考虑以下我的html代码
2
746<html>
<head>
</head>
<body>
<div class="wrapper">
<section class="first">第一内容</div>
<section class="second">第二内容</div>
<section class="third">第三内容</div>
</div>
</body>
</html>
我需要的是通过更改类名而不是在html中更改位置，将第三个内容显示在浏览器视图的顶部 同时，更改应保持响应性。
我的html代码如下
<div class="wrapper">
<section class="third">第一内容</section>
<section class="second">第二内容</section>
<section class="first">第三内容</section>
</div> 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
我会使用网格系统和顺序。然后使用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>