Div tag alignment with Bootstrap

Question

I'm sure this has been answered many times - but I've searched here with no luck...

I'm new to bootstrap (and div tags)... Here's what I've spent all day trying to figure out... I have 2 rows. The 1st row has 3 columns (1,2,3). The 2nd has 2 columns (4,5) . I'm trying to simply "allow" column "3" to extend into and beside column "5" - currently column 4 & 5 get pushed down below the end of 3...

Column "3" may contain an article or contact form - not sure yet- either way I need the flexibility...

I have successfully done this by nesting 4 into 1 & 5 into 2... but when I view in mobile view column 3 gets pushed to the end of section5... I want 3 to remain number 3 in the mobile vertical view list..

Does Bootstrap have something built into CSS to accomodate? Are multiple 'containers' required? I'd rather not add CSS, but if that's the only way so be it... Thanks!

My code:

<div class="row-fluid">
    <div class="col-md-4">
         <h2>section1 </h2>
    </div>
    <div class="col-md-4">
         <h2>section2 </h2>
    </div>
    <div class="col-md-4">
         <h2>section3 </h2>
    </div>
</div>
<div class="row-fluid">
    <div class="col-md-4">section4</div>
    <div class="col-md-4">section5</div>
</div>

Answer 1

I believe this is what you're looking to accomplish:

Bootply

First, there is no .row-fluid class in Bootstrap 3. For this design, you'll need just a single .row and you'll use the helper class .pull-right on the section 3 element as follows:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6">
          <h2>Section 1</h2>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <h2>Section 2</h2>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 pull-right">
      <h2>Section 3</h2> 
    </div>
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6">
          <h2>Section 4</h2>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
          <h2>Section 5</h2>
        </div>
      </div>
    </div>
  </div>
</div>

So, what's going on here is that the col-* classes have float: left applied to them by default. That means that if you were to have very long content in the 3rd column, when the remaining two columns wrap, there would be a gap between them and the first two columns, equal to the height of the 3rd column. We can fix this by telling the third column to float right instead. That's what the class .pull-right does -- it applies float: right to the element on which it's used.

When the third column is floated to the right, the 4th and 5th columns can sit neatly right below the left floated columns 1 and 2 at the md and lg breakpoints (991px and up). At the sm and xs breakpoints though, the source order is honored and section 3 displays in the proper position below section 2 and above section 4.

Finally, using a single row allows all of the columns to wrap at 12-grid units.

**If your content is dynamic or uneven in length, you can use the technique shown in the Bootply of nesting columns 1 and 2 together in a single column, as well as columns 4 and 5.

If you're new to Bootstrap, I encourage you take a look at my answers here or here, to help you understand and visualize the grid better.