Панель Bootstrap разрушается, создавая пробелы

Question

Итак, у меня есть 2 колонки, по 2 панели в каждой. Каждый столбец составляет 50% (col-md-6) с двумя панелями внутри, которые имеют возможности свертывания. Свернуть работает хорошо, но проблема у меня заключается в том, что если я раскрою панель, нижний левый div переместится слишком низко и создаст огромный разрыв между панелями 1 и 3.

Это то, что происходит, когда я раскрываю панель 1. Разрыв между 1 и 3 имеет ОДНО пробел без всякой причины. Я не могу найти способ исправить это.

panel1  |  panel 2
        |
        |  panel 4
        |
panel3  |

Пример загрузки

Answer 1

Хотя это может и не выглядеть, это то, что на самом деле происходит. Третья панель сдвигается вправо, а 4 - на новую строку.

panel1  |  panel 2
        |
        |  panel 3
        |
panel4  |

Вам не хватает row делись между вашими container а также col-sm-6, Это предотвратит перемещение столбцов.

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>

РЕДАКТИРОВАТЬ: Или что-то вроде этого....

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>