<!DOCTYPE html>

<style>
.container {
  display: box;
  display: -moz-box;
  display: -webkit-box;
  box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
}

.container:before {
  display: block;
  content: "Before content";
  background:red;
}

.c1o2 {
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2; 
    box-ordinal-group: 2;
}

.c2o1 {
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1; 
    box-ordinal-group: 1;
}
</style>

<h1>Normal</h1>
<div class="container">
  <div>1st in code - 1nd in order</div>
  <div>2nd in code - 2nd in order</div>
</div>

<h1>Reordered</h1>
<div class="container">
  <div class="c1o2">1st in code - 2nd in order</div>
  <div class="c2o1">2nd in code - 1st in order</div>
</div>