Move one element before another with css/html

Question

Is it possible to "move" one full width element that is below another one so that it appears to be above by only using CSS/HTML? (and not changing the markup order)

<div id="first">first</div>
<div id="second">second</div>

#first {…}
#second {…}

Desirable result:

second
first

Answer 1

You can use CSS Flexible Boxes for this. Specifically the order property.

In this example I've added width and background-color to help visualize. Please note that browser support for CSS flexible boxes is limited to modern browsers such as IE 10+, Chrome 21+, Firefox 20+ and may not work well in mobile browsers (especially older ones).

.container {
  display: flex;
  flex-direction: column;
}

#first {
  order: 2;
  
  width: 10em;
  margin-top: 1em;
  background-color: orange;
}
#second {
  order: 1;
  
  width: 10em;
  background-color: yellow;
}

<div class='container'>
  <div id=first>
    first
  </div>
  <div id=second>
    second
  </div>
</div>