考慮以下我的html程式碼
<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>
P粉2074830872023-09-09 11:07:58
我會使用網格系統和順序。然後使用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來改變順序號
P粉2041364282023-09-09 09:43:19
.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>