Consider the following my html code
<html>
<head>
</head>
<body>
<div class="wrapper">
<section class="first">第一内容</div>
<section class="second">第二内容</div>
<section class="third">第三内容</div>
</div>
</body>
</html>
What I need is to display the third content on top of the browser view by changing the class name instead of changing the position in the html At the same time, changes should remain responsive.
My html code is as follows
<div class="wrapper">
<section class="third">第一内容</section>
<section class="second">第二内容</section>
<section class="first">第三内容</section>
</div>
P粉2074830872023-09-09 11:07:58
I will use a grid system and order. Then use js to change the sequence number so that the third div becomes the first. Do you think this might be a solution for you?
You can find more information here: https://developer.mozilla.org/en-US/docs/Web/CSS/order
.wrapper{
display: grid;
}
.first{
order: 1;
}
.second{
order: 2;
}
.third{
order: 3;
}
Then you can use JS to change the sequence number
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>