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; } </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> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("parent").firstElementChild; function myFunction(){ x.style.order = "1"; } </script> <p><strong>Note</strong>: Click on the button to set the order value of 1 to the first child (Div 1).</p> </body> </html>
OUTPUT
×

Save as Private