| <!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> |