HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #parent{ display: flex; flex-wrap: wrap; width: 100%; border: 1px solid #8c8c8c; } #parent > div{ border:1px solid #267326; text-align: center; line-height: 4; width: 70px; height:70px; } #parent > div:nth-child(1){ /*Put 1st element to 2nd place*/ order: 2; } #parent > div:nth-child(2){ /*Put 2nd element to 3rd place*/ order: 3; } #parent > div:nth-child(3){ /*Put 3rd element to 4th place*/ order: 4; } #parent > div:nth-child(4){ /*Put 4th element to 1st place*/ order: 1; } </style> </head> <body> <h1>CSS order Property</h1> <div id="parent"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> </div> </body> </html>
OUTPUT
×

Save as Private