43 lines
774 B
HTML
43 lines
774 B
HTML
<!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>
|