.first { background-color: #EEE; } .second { background-color: #DDD; } .third { background-color: #CCC; } .fourth { background-color: #BBB; } .reverseOrder, .reverseOrder > .child { padding: 10px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .lt-ie9 .reverseOrder, .lt-ie9 .reverseOrder .child { /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246063538223773e-16, M21=-1.2246063538223773e-16, M22=-1, SizingMethod='auto expand')"; /* IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246063538223773e-16, M21=-1.2246063538223773e-16, M22=-1, SizingMethod='auto expand'); zoom: 1; }
<!--[if lt IE 9]><div class="lt-ie9"><![endif]--> <div class="reverseOrder"> <div class="child first">First child</div> <div class="child second">Second child</div> <div class="child third">Third child</div> <div class="child fourth">Fourth child</div> </div> <!--[if lt IE 9]></div><![endif]-->