How can I reorder my divs using only CSS?

Question

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div when they are not in that order in the HTML? Both divs contain data that varies in height and width.

<div id="wrapper">     <div id="firstDiv">         Content to be below in this situation     </div>     <div id="secondDiv">         Content to be above in this situation     </div> </div> Other elements 

Hopefully it is obvious that the desired result is:

Content to be above in this situation Content to be below in this situation Other elements 

When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both.

I am specifically looking for a CSS-only solution (and it will probably have to be met with other solutions if that doesn't pan out).

There are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated—given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.

Answer 1

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