SO column layout

Playing with Bootstrap and flex

by panchroma

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12 header">
                <h1>header</h1>
            </div>
        </div><!-- end row-fluid -->
        
<div class="row-fluid col-wrap">
<div class="span4 col left">
<p>left column </p>
<p>left column </p>
<p>left column </p>
</div><!-- end span 4-->
    
<div class="span4 col center">
<p>middle column</p>
</div><!--end span4-->
    
<div class="span4 col right">
<p>right column </p>
<p>right column </p>
<p>right column </p>
 <p>right column </p>
<p>right column </p>
</div><!-- end span 4-->

</div><!-- end row-fluid -->
    
        <div class="row-fluid">
            <div class="span12 header">
                <h3>footer</h3>
            </div>
        </div><!-- end row-fluid -->

</div>

CSS

.col-wrap{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}

.span12.header, .span12.footer{
    background-color:pink;
    height:100px;
}
.left{
    background-color:#ddd;
}
.center{
    background-color:#aaa;
}

.right{
    background-color:olive;
}