¬ http://devlint.fr/labs/

CSS flexible box

HTML :

<div id="col2">Column 2</div>
<div id="col1">Column 1</div>
<div id="col3">Column 3</div>

CSS :

article{width:100%;margin: 0;
-webkit-box-flex:5;
-moz-box-flex:5;
box-flex:5;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-direction : reverse;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-direction : reverse;
display: box;
box-orient: horizontal;
box-direction : reverse;
}
article > div{border-left:1px solid #666;border-right:1px solid #222}
#col1 {padding:1em;
-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;
-webkit-box-ordinal-group:2;-moz-box-ordinal-group:2;box-ordinal-group:2;}
#col2 {padding:1em;
-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;
-webkit-box-ordinal-group:2;-moz-box-ordinal-group:2;box-ordinal-group:2;}
#col3 {padding:1em;
-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;
-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;box-ordinal-group:1;}
code{width:300px;background:rgba(250,250,250,0.5);display:block;padding:1em;text-shadow:none}

Cette colonne est en deuxième position dans le code

Cette colonne est en troisième position dans le code