How to change DIV order using CSS?

change DIV order using css

change DIV order using css

How to change DIV order using CSS?

Hello ! If you are a webs designer then sometimes you will need to use this method. Here I will teach you that how can you change DIV order using CSS.

Here for this task we will use the display property of the CSS.

display:  table-footer-group;
display: table-row-group;
display:  table-header-group;

Here is the Example to change DIV order using CSS:

 

HTML:

<div id=”example”>
<div id=”block-1″>First</div>
<div id=”block-2″>Second</div>
<div id=”block-3″>Third</div>
</div>

CSS:

#example {display: table; width: 100%; }

#block-1 {display: table-footer-group; }
#block-2 {display: table-row-group;    }
#block-3 {display: table-header-group; }

Result:

Third
Second
First

 

 

Hope this example will help you a lot.

Please like and Share it this article was really helpful for you.

Leave a Reply

Your email address will not be published. Required fields are marked *

19 − 18 =

Arrange a call back