flexbox_rtl-order-ref.html (690B)
1 <!DOCTYPE html> 2 <title>flexbox | flex-flow: column-reverse wrap-reverse; order | rtl</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 text-align: right; 15 background: white; 16 margin: 1em; 17 width: 8em; 18 height: 1.5em; 19 float: left; 20 } 21 .one { 22 background: pink; 23 } 24 .two { 25 background: yellow; 26 } 27 .three { 28 background: black; 29 color: white; 30 } 31 .four { 32 background: fuchsia; 33 color: white; 34 } 35 </style> 36 37 <div> 38 <span class="three">three</span> 39 <span class="one">one</span> 40 <span class="four">four</span> 41 <span class="two">two</span> 42 </div>