Bootstrap Panel Collapse Creating Gaps

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 th

Solution 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>