This question already has answers here:
Closed 8 months ago.
Is it possible to change DOM element order with CSS? I have an iframe where I'd like to change the toolbar from above to below the iframe's main content.
So from this:
<iframe>
<html>
<body>
<div id='toolbar'></div>
<div id='main_content'></div>
<div id='other_stuff'></div>
</body>
</html>
</iframe>
To this:
<iframe>
<html>
<body>
<div id='main_content'></div>
<div id='toolbar'></div>
<div id='other_stuff'></div>
</body>
</html>
</iframe>
If this is not possible using CSS, can someone advise on how to do this in Javascript? Manipulating iframe contents always confuse the *^%$ out of me. As a practical application, i'm actually referring to the iframe that is generated with Crocodoc (https://crocodoc.com/docs/walkthrough/skinning/) so my intent is to make this question and answer valuable to those using this service too.
I'm quite late to the party but I just want to let you guys know you actually can change the DOM order with CSS alone.
Although to do this we have to use the CSS3 flexbox syntax. So basically IE10+, in my case often not a problem as I use it to manipulate sites for mobile.
So how do we do it?
The parent needs to become a flexbox element. Eg:
(only using the webkit vendor prefix here. The css is dazzling as it is without it)
#main {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
Then, swap divs around by indicating their order with:
#main > div#one{
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
overflow:visible;
}
#main > div#two{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
Good luck!
You can't change DOM order with css. You could however apply a position: absolute; css style and position the element by setting top, bottom, left, right styles as needed.
Perhaps better in your case would be position: fixed; bottom: 0; to position your toolbar at the bottom of the browser window.
