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