Bootstrap .row列总是相同的高度

Question

所以我使用bootstrap创建AngularJS，PHP，mySQL应用程序。我在我的网站上使用网格模式，但我希望列是动态的。所以尽可能多的内容，列的高度。但如果我在第二列中有更多内容，则每个列旁边有2列，第一列的高度相等。我正在寻找一个anwser，但每个话题都与我的相反。我发现的每一个问题都与那些有相同高度的柱子有问题的人在一起。所以这是我的代码：

<div class="row" style="margin-top: 10px;">
<div class="col-lg-3" style="margin-top: 10px; padding: 10px; border: 1px solid black;">
  <div class="insider">
  <h4> Filters : </h4>
    <input type="text" class="form-control" placeholder="Szukaj..." ng-model="search"></br>
<div id="accordion"  onselectstart="return false;">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-default btn-block" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Categories
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <div class="custom-control custom-checkbox" ng-repeat="item in categories">
            <input type="checkbox" ng-click="currentPage=0" ng-model="item.checked" value="{{item.checked}}" class="custom-control-input" id="checkbox-{{item.name}}">
            <label class="custom-control-label" for="checkbox-{{item.name}}">{{item.name}}</label>
          </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-default btn-block" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Brands
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        <div class="custom-control custom-checkbox" ng-repeat="item in brands">
            <input type="checkbox" ng-model="item.checked" value={{item.checked}} class="custom-control-input" id="checkbox-{{item.name}}">
            <label class="custom-control-label" for="checkbox-{{item.name}}">{{item.name}} </label>
          </div>
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn btn-outline-primary btn-block">Clear Filters</button>
</div>
</div>
  <div class="col-lg-9" style="margin-top: 10px;">
    <div class="insider">
    <div class="well" style="padding:20px; border: 1px solid black;" ng-repeat="item in products | filter:search | startFrom:currentPage:perPage">
  <h4>
    <strong>{{item.name}}</strong>
    <span class="float-right badge badge-info">
      {{item.price | currency}}
    </span>
  </h4>
  <button ng-click="getProductsOnAdd(item);" class="btn btn-success float-right">Dodaj do koszyka</button>
  <span class="lead">{{item.description}}</span>
  </div>
  <div class="alert alert-warning" ng-show="products.length == 0">
    We didn't find any result with this criteria.
    <a ng-click="getProductsFunction()" class="alert-link">Click here to reset filters.</a>
  </div>
</div></br>
  <ul uib-pagination boundary-links="true" items-per-page="perPage" total-items="(products | filter:search).length" ng-model="currentPage" class="pagination float-right" max-size="maxSize" boundary-link-numbers="true" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></ul>
</div>
</div>

这是我添加的css的一部分，但它没有帮助，我有更多的尝试，但没有一个工作：

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

现在的样子：

这里是我要删除的部分：