How to swap two elements using CSS
Posted By : Himanshu Khurana | 30-Jun-2016
It will arrange the elements from 1,2,3 to 2,3,1. we will use display table in parent div and table-header-group will be placed at the top and table-footer-group at bottom.The table-row-group puts an element in the middle.
HTML
<div class="wrapper"> <div class='div1'>1</div> <div class='div2'>2</div> <div class='div3'>3</div> </div>
CSS
.wrapper {
display: table;
width: 100%;
}
.div1 {
display:table-footer-group;
}
.div2 {
display:table-header-group;
}
.div3 {
display:table-row-group;
}
EXAMPLE
I hope this blog will help for all.
THANKS
About Author
Himanshu Khurana
Himanshu is an experienced Frontend developer with experience and capabilities to build compelling UI's for Web and Mobile Applications. Himanshu likes playing cricket and listening music.