Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Titre du document</title> <style> .container { padding: 0; margin: 0; list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } .box:nth-of-type(1) { order: 4; } .box:nth-of-type(2) { order: 1; } .box:nth-of-type(3) { order: 3; } .box:nth-of-type(4) { order: 5; } .box:nth-of-type(5) { order: 2; } .box { background: #1c87c9; padding: 5px; width: 100px; height: 100px; margin: 5px; line-height: 100px; color: #eee; font-weight: bold; font-size: 2em; text-align: center; } </style> </head> <body> <h2>Propriété order</h2> <ul class="container"> <li class="box">1</li> <li class="box">2</li> <li class="box">3</li> <li class="box">4</li> <li class="box">5</li> </ul> </body> </html>