I'm using bootstrap's collapsible functionality to have a list of stores with expandable information.

The problem is, when I open one of the collapsibles on the left hand column, it pushes some items into the next column. If I open a collapsible on the right hand column, everything slides properly, but it also adds a space on the left hand column. Please see the following plunker. Resize the screen until there are two rows of collapsibles and then click on one in each row to see the two behaviours: 

<http://plnkr.co/edit/2SLCQQJetyvM34mrCsHj?p=preview>

This is the code I am using:

```
<div class="panel panel-default store-wrapper">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
        {{x.name}}
      </a>
    </h4>
  </div>
  <div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
    <div class="panel-body">
      <div class="store-info col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="item in x.stores">
        <div class="col-xs-6 city">{{item.city}}:</div>
        <div class="col-xs-6 phone">
          <a ng-href="tel:{{item.number}}">{{item.number}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

```

My desired result is to have the collapsible only slide the column that it lives in, and that items do not move onto the next row. Is this possible with Bootstrap's grid system?