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

<divclass="container"><divclass="row"><!--ADD ROW--><divclass="col-sm-6"><divclass="panel panel-primary">
          1
      </div></div><divclass="col-sm-6"><divclass="panel panel-primary">
          2
      </div></div></div><!--END ROW--><divclass="row"><!--ADD ROW--><divclass="col-sm-6"><divclass="panel panel-primary">
          3
      </div></div><divclass="col-sm-6"><divclass="panel panel-primary">
          4
      </div></div></div><!--END ROW--></div>

EDIT: Or something like this....

DEMO

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