CSS properties - order

revision:

order property

- specifies the order of a flexible item relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the order property has no effect.

CSS syntax : order: number | initial | inherit;

Property values:

number : default value 0. Specifies the order for the flexible item

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.order="2"

example: order property

code: 
                    <div>
                        <div id="main">
                            <div style="background-color:coral;" id="myRedDIV"></div>
                            <div style="background-color:lightblue;" id="myBlueDIV"></div>
                            <div style="background-color:lightgreen;" id="myGreenDIV"></div>
                            <div style="background-color:pink;" id="myPinkDIV"></div>
                        </div>
                    </div>
                    <style>
                        #main {width: 40vw; height: 15vw; border: 0.2vw solid #c3c3c3; display: -webkit-flex; 
                            /* Safari */  display: flex;}
                        #main div {width: 7vw; height: 7vw; }
                        /* Safari 6.1+ */
                        div#myRedDIV   {-webkit-order: 2;}
                        div#myBlueDIV  {-webkit-order: 4;}
                        div#myGreenDIV {-webkit-order: 3;}
                        div#myPinkDIV  {-webkit-order: 1;}
            
                        /* Standard syntax */
                        div#myRedDIV   {order: 2;}
                        div#myBlueDIV  {order: 4;}
                        div#myGreenDIV {order: 3;}
                        div#myPinkDIV  {order: 1;}
                    </style>