SO - col to overlap row

by panchroma

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="container">
  <div class="row">
  <div class="span9">span9</div>
  
    </div> <!-- end row -->
    
      <div class="row">
  <div class="span3">span3</div>
          <div class="span3">span3</div>
          <div class="span3">span3</div>
  
    </div> <!-- end row -->
    
    
   <div class="row">
  <div class="span12">span 12</div>
  
 </div><!-- end row -->
    
    <div class="row sidebar">
  <div class="offset-9 span3">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo vitae quam accumsan semper. Vivamus varius orci posuere turpis congue semper vulputate eros congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eleifend magna in nulla semper vestibulum. Nulla a auctor odio. Vestibulum condimentum placerat tortor ut tempus. Morbi aliquet pellentesque sapien eu pharetra. Vivamus luctus, urna id pretium congue, dui nisi vestibulum nunc, non tincidunt justo dolor eget lacus. Aliquam condimentum, urna at blandit tristique, nulla felis porta erat, congue consectetur tortor mi vitae neque.

                  Nullam pellentesque, velit in convallis sagittis, enim enim viverra elit, ac tincidunt tellus elit eget dui. Donec sit amet odio eros. Nullam vitae pretium augue. Maecenas sit amet nisi ante, quis laoreet augue. Aliquam commodo suscipit bibendum. Duis imperdiet ornare magna, non porttitor lacus faucibus eget. Aenean viverra purus quis turpis fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit molestie nunc. Donec convallis mollis dui nec accumsan. Donec posuere ipsum ut nisl ornare eget sodales metus feugiat. Aliquam viverra, nunc nec malesuada...

CSS

.span9{
    background-color:#ddd;
    height:200px;
}
.span3{
background-color:olive;
    border-top:solid white 2px;
    height:200px;    
}

.span12{
    background-color:#aaa;
    height:200px;
}

.row.sidebar .span3{
   float:right;
    top:0;
    right:0;
    position:absolute;
    top:0;
    right:0;
    background-color:inherit;
}

.container{
    position:relative;
}

@media (max-width: 767px) {
.row.sidebar .span3{
   float:right;
    top:0;
    right:0;
    position:static;
}
}