CSS3 Flexbox http://codepen.io/jayj/pen/LiJkc

index.html

<div class="container">
  
  <div class="col">1</div>
  
  <div class="col">2</div>
  
  <div class="col">3</div>
  
  <div class="col">4</div>
  
</div>


<div class="container center">
  
  <div class="col fixed">Centered</div>
  
</div>

<div class="container">
  
  <div class="col flex-2">1</div>
  
  <div class="col">2</div>
  
  <div class="col fixed">3</div>
  
  <div class="col">4</div>
  
</div>

<div class="container">
  
  <div class="col order-3">1</div>
  
  <div class="col order-4">2</div>
  
  <div class="col order-1">3</div>
  
  <div class="col order-2">4</div>
  
</div>

<div class="container column-direction">
  
  <div class="col">1</div>
  
  <div class="col">2</div>
  
  <div class="col">3</div>
  
  <div class="col">4</div>
  
</div>

<div class="container column-direction-reverse">
  
  <div class="col">1</div>
  
  <div class="col">2</div>
  
  <div class="col">3</div>
  
  <div class="col">4</div>
  
</div>

style.css

.container  {
  display: -webkit-flex;
  
  margin: 40px;
min-height: 200px;
}
.col {
  background: #ccc;
  border: 5px solid green;
  padding: 30px;
  -webkit-flex: 1;
  
  font: bold 30px sans-serif;
  text-align: center;
}

.flex-2 {
   -webkit-flex: 2;
}

.fixed {
  width: 200px;
  background: papayawhip; 
  -webkit-flex: none;
}

.order-1 {
 -webkit-order: 1; 
}

.order-2 {
 -webkit-order: 2; 
}

.order-3 {
 -webkit-order: 3; 
}

.order-4 {
 -webkit-order: 4; 
}

.center {
   border: 5px solid blue;
}

.center .col {
  margin: auto; 
}

.column-direction {
 -webkit-flex-direction: column; 
}

.column-direction-reverse {
 -webkit-flex-direction: column-reverse; 
}

http://codepen.io/jayj/pen/LiJkc