html - How can I reorder my divs using only CSS?

This solution uses only CSS and works with variable content

#wrapper   { display: table; } #firstDiv  { display: table-footer-group; } #secondDiv { display: table-header-group; } 

A CSS-only solution (works for IE10+) – use Flexbox's order property:

Demo: http://jsfiddle.net/hqya7q6o/596/

#flex { display: flex; flex-direction: column; }  #a { order: 2; }  #b { order: 1; }  #c { order: 3; }

<div id="flex">     <div id="a">A</div>     <div id="b">B</div>     <div id="c">C</div>  </div>

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/order

As others have said, this isn't something you'd want to be doing in CSS. You can fudge it with absolute positioning and strange margins, but it's just not a robust solution. The best option in your case would be to turn to javascript. In jQuery, this is a very simple task:

$('#secondDiv').insertBefore('#firstDiv'); 

or more generically:

$('.swapMe').each(function(i, el) {     $(el).insertBefore($(el).prev()); }); 

This can be done using Flexbox.

Create a container that applies both display:flex and flex-flow:column-reverse.

/* -- Where the Magic Happens -- */    .container {        /* Setup Flexbox */    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;      /* Reverse Column Order */    -webkit-flex-flow: column-reverse;    flex-flow: column-reverse;    }      /* -- Styling Only -- */    .container > div {    background: red;    color: white;    padding: 10px;  }    .container > div:last-of-type {    background: blue;  }

<div class="container">        <div class="first">         first      </div>        <div class="second">        second      </div>      </div>

Sources:

• https://css-tricks.com/using-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow#Browser_compatibility

There is absolutely no way to achieve what you want through CSS alone while supporting pre-flexbox user agents (mostly old IE) -- unless:

1. You know the exact rendered height of each element (if so, you can absolutely position the content). If you're dealing with dynamically generated content, you're out of luck.
2. You know the exact number of these elements there will be. Again, if you need to do this for several chunks of content that are generated dynamically, you're out of luck, especially if there are more than three or so.

If the above are true then you can do what you want by absolutely positioning the elements --

#wrapper { position: relative; } #firstDiv { position: absolute; height: 100px; top: 110px; } #secondDiv { position: absolute; height: 100px; top: 0; } 

Again, if you don't know the height want for at least #firstDiv, there's no way you can do what you want via CSS alone. If any of this content is dynamic, you will have to use javascript.