Changing DOM element order with CSS (Crocodoc) [duplicate]

Answer 1

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.

Answer 2

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!