How to bring a section above another by using style and without changing their position-CodePudding

Consider my below html

<html>
<head>
</head>
<body>
    <div >
        <section >First Content</div>
        <section >Second Content</div>
        <section >ThirdContent</div>
    </div>
</body>
</html>

What I need is to bring the third content to the top in the browser view only by changing the class name not its position in the html Also the changes should preserve responsiveness,

My html is given below

<div >
    <section >First Content</div>
    <section >Second Content</div>
    <section >ThirdContent</div>
</div>

CodePudding user response：

I would use a grid system and order. Then with js you just change the order number so the third div become the first one. Do you think it could be a solution for you?

You'll find more info 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 use JS to change the order number

CodePudding user response：

.wrapper{
     display: flex;
     flex-flow: column;
}
 .first{
     order: 3;
}
 .second{
     order: 2;
}
 .third{
     order: 1;
}

<html>
<head>
</head>
<body>
    <div >
        <section >First Content</section>
        <section >Second Content</section>
        <section >ThirdContent</section>
    </div>
</body>
</html>

Hope this works