Reversing the Box Order using HTML5 and CSS3

We can reverse the order of boxes using HTML5 and CSS3 using following code.
Reversing the Box Order

.father{
background:#e2e2e2; 
padding:10px;

/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-direction:reverse;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-direction:reverse;

/* W3C */
display:box;
box-orient:horizontal;	
box-direction:reverse;
}

.baby1{ background:#99FF66; padding:10px; margin:10px;}
.baby2{ background:#FFFF66; padding:10px; margin:10px;}
.baby3{ background:#CCFFCC; padding:10px; margin:10px;}
.baby4{ background:#0099FF; padding:10px; margin:10px;}

<section class="father">
<div class="baby1">baby1</div>
<div class="baby2">baby2</div>
<div class="baby3">baby3</div>
<div class="baby4">baby4</div>
</section>

Author: Raghava

Share This Post On

Submit a Comment

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


*

'