CodePen

HTML

            
                <h1>Normal (no reordering)</h1>
  <div class="container">
    <div>1st in code - 1nd in order</div>
    <div>2nd in code - 2nd in order</div>
  </div>
  <h1>Reordered (Demonstrating Bug)</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>

            
          
!
via HTML Inspector

CSS

            
              .container
{
  display: box;
  display: -moz-box;
  display: -webkit-box;
  box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  background:rgba(0,0,0,0.1);
}

.container:before
{
  display: block;
  content: "\2605 BEFORE \2605";
  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;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................