Re-order HTML blocks using CSS3 - CSS3 Webkit box
Re-order HTML blocks using CSS3 - CSS3 Webkit box
HTML
<div id="blockContainer">
<div id="blockA">Block A</div>
<div id="blockB"><div class="aa">
Block B fjh jfjhf jhfjhf jhfjhf jhfjhf jhfj</div></div>
<div id="blockC">Block C</div>
</div>
SCSS
@mixin blocks-container() {
display: -webkit-box;
}
@mixin block-order($order) {
-webkit-box-ordinal-group: $order;
-moz-box-ordinal-group: $order;
box-ordinal-group: $order;
}
#blockContainer {
@include blocks-container() ;
width: 100px;
div {
background-color:yellow;
margin: 0 10px;
}
.aa {
height:100%;
}
}