Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .flex-container { display: flex; flex-flow: row wrap; padding: 30px; border: 1px dashed #666; } .flex-container > div { width: 30%; height: 70px; margin: 5px; border-radius: 3px; background-color: #8ebf42; text-align: center; font-size: 28px; font-weight: 700; line-height: 70px; color: #fff; } .item-one { order: 1; } .item-four { order: -1; } .item-five { order: 0; } .item-three { order: 2; } </style> </head> <body> <div class="flex-container"> <div class="item-one">1</div> <div class="item-two">2</div> <div class="item-three">3</div> <div class="item-four">4</div> <div class="item-five">5</div> </div> </body> </html>