title: How can i use bootstrap to make a column that spans over other rows beneath it?
body: <p>I have a website with a 3 column layout, and I want my middle column to have a different height than the side columns, then I have a second row of 2 columns that I have col-pull-left and col-push-right which I want to appear next to the large middle column, however I always get that second row UNDERNEATH my large middle column. I am trying to figure out how to do this using bootstrap. Any suggestions?</p>
  
  <p>I tried floating the middle column, and floating the entire row, i can't seem to get it to work because the second row always clears the first row, so it clears the entire center column as well.</p>
  
  <p>I hope I made myself clear. Basically my code looks like this, (im removing the php for wp)</p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div id="contentWrap1" class="col-sm-3"&gt;
              &lt;h3&gt;Acerca de CIPM&lt;/h3&gt;
              &lt;hr&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce     eget neque gravida, faucibus lacus vel.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="contentWrap2" class="col-sm-4 col-sm-offset-1"&gt;
              //content
              //ths is the column that I want to be longer than the others because it contains many posts
          &lt;/div&gt;
          &lt;div id="contentWrap3" class="col-sm-3 col-sm-offset-1"&gt;
              &lt;h3&gt;C&amp;oacute;digo de Etica&lt;/h3&gt;
              &lt;hr&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      //now this is the second row that is displaying beneath the first one, however high the center column is, but i would like it to display up next to the center column, with the next #contentWraps on either side. Almost as if te content had 2 sidebars on each side, except i split them up this way for the responsive layout
      &lt;div class="row"&gt;
          &lt;div id="contentWrap4" class="col-sm-3 pull-left" style="float:left; clear: none;"&gt;
              &lt;h3&gt;Quicklinks&lt;/h3&gt;
              &lt;hr&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="contentWrap5" class="col-sm-3 pull-right"&gt;
              &lt;h3&gt;External Newsfeed&lt;/h3&gt;
              &lt;hr&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>