jquery - Bootstrap panel collapse creating gaps

Question

So I've got 2 columns, with 2 panels each. Each column is 50% (col-md-6) with 2 panels inside that have collapse capabilities. Collapse works fine, but the problem I'm having is that If I expand a panel, the bottom left div moves far too low and creates a massive gap between panel 1 and 3.

This is what happens when I expand panel 1. The gap between 1 and 3 has ALOT of whitespace for no reason. I can't seem to figure out a way to fix it.

panel1  |  panel 2
        |
        |  panel 4
        |
panel3  |

Bootply example

Answer 1

Although it may not look like it, this is what is actually happening. Panel three is pushed to the right, and 4 is pushed to a new line.

panel1  |  panel 2
        |
        |  panel 3
        |
panel4  |

You are missing row divs between your container and col-sm-6. This will prevent the columns from being pushed around.

DEMO

<div class="container">
  <div class="row"> <!--ADD ROW-->
    <div class="col-sm-6">
      <div class="panel panel-primary">
          1
      </div>
    </div>

    <div class="col-sm-6">
      <div class="panel panel-primary">
          2
      </div>
    </div>
  </div><!--END ROW-->

  <div class="row"><!--ADD ROW-->
    <div class="col-sm-6">
      <div class="panel panel-primary">
          3
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-primary">
          4
      </div>
    </div>
  </div><!--END ROW-->
</div>

EDIT: Or something like this....

DEMO

<div class="container">
  <div class="row"> 
    <div class="col-sm-6">
      <div class="panel panel-primary">
          1
      </div>
      <div class="panel panel-primary">
          2
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-primary">
          3
      </div>
      <div class="panel panel-primary">
          4
      </div>
    </div>
  </div>
</div>