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

Question

Consider my below html

<html>
<head>
</head>
<body>
    <div class="wrapper">
        <section class="first">First Content</div>
        <section class="second">Second Content</div>
        <section class="third">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 class="wrapper">
    <section class="third">First Content</section>
    <section class="second">Second Content</section>
    <section class="first">ThirdContent</section>
</div>

Using flex, [How to change order of elements when device is mobile](https://stackoverflow.com/a/72350185/17684809) — Cédric, Oct 12 '22 at 08:23
Be aware that changing the visual order of the elements could be confusing for people who use assistive technologies. They will read the content in the order specified by the DOM. Also if you have actionable elements like inputs or links inside the sections, the tab order will be altered. — Fabrizio Calderan, Oct 12 '22 at 08:24
@FabrizioCalderan do you know if there is an/what's the impact of the css property `order` for people using assistive technologies ? — Cédric, Oct 12 '22 at 08:30
@FabrizioCalderan For information, MDN provides some [links](https://developer.mozilla.org/en-US/docs/Web/CSS/order#accessibility_concerns) about it. There are `tabindex` and `aria-flowto` that can be used ([source](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)), but I don't know much about it to say if it's sufficient — Cédric, Oct 12 '22 at 12:20
@cedric Changing the tabindex to change the order of tab is not recommended too: https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/ — Fabrizio Calderan, Oct 12 '22 at 13:55

score 2 · Accepted Answer · answered Oct 12 '22 at 09:07

.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>

Hope this works

C0G1T0 · Answer 2 · 2022-10-12T08:29:18.367

1

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

edited Oct 12 '22 at 08:29

answered Oct 12 '22 at 08:20

C0G1T0

350
1
5
17

could you please provide the css, I am new in css – Ajith Oct 12 '22 at 08:22

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

2 Answers2