flexbox_order-ref.html (664B)
1 <!DOCTYPE html> 2 <title>flexbox | flex-flow: column-reverse wrap-reverse; order</title> 3 <link rel="author" href="http://opera.com" title="Opera Software"> 4 <style> 5 div { 6 background: blue; 7 padding: 1em 0 0; 8 margin: 1em 0; 9 border: 1px solid black; 10 width: 20em; 11 height: 7em; 12 } 13 span { 14 background: white; 15 margin: 1em; 16 width: 8em; 17 height: 1.5em; 18 float: left; 19 } 20 .one { 21 background: pink; 22 } 23 .two { 24 background: yellow; 25 } 26 .three { 27 background: black; 28 color: white; 29 } 30 .four { 31 background: fuchsia; 32 color: white; 33 } 34 </style> 35 36 <div> 37 <span class="one">one</span> 38 <span class="three">three</span> 39 <span class="two">two</span> 40 <span class="four">four</span> 41 </div>