Fill a Bootstrap Responsive table vertically

Question

I would like to use a bootstrap solution to be able to dynamically generate columns, that contains elements, and have an overflow of this column as a horizontal scroll.

My project should display a product list ordered by their brand. So a column is a brand and in the column are many products.

I saw that the Bootstrap responsive table might be a solution but I can't make it fit my needs. This table organize the data by row when I need to organize them by column.

Here is an image of how it should be :

The code below is generated using JS. I'm building my products and I'm pushing them in a "col-3" that is my brand. Works well as long as I have 4 brands maximum. If I add a 5th one, this last column is pushed under one of the existing one. That is exactly what I'm trying to change. I want this 5th column to be at the same 'level' of the others and to have a horizontal scroll on my brand container.

<div id="ProductResultList" class="panel-body">
   <div class="col-md-3">
      <table class="table" id="searchTable">
         <thead>
            <tr>
               <th>Brand A</th>
            </tr>
         </thead>
         <tbody>
            <tr class="clickable-row" url="#" productid="2790">
               <td>
                  <div class="row">
                     <div class="col-md-6">
                        <div class="col-md-12">Product 1</div>
                     </div>
                     <div class="col-md-2">
                        <div class="col-md-12 SearchPrice">1.5</div>
                     </div>
                     <div class="col-md-4">
                        <img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
                     </div>
                  </div>
               </td>
            </tr>
            <tr class="clickable-row" url="#" productid="2750">
               <td>
                  <div class="row">
                     <div class="col-md-6">
                        <div class="col-md-12">Product 2</div>
                     </div>
                     <div class="col-md-2">
                        <div class="col-md-12 SearchPrice">1.5</div>
                     </div>
                     <div class="col-md-4">
                        <img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
                     </div>
                  </div>
               </td>
            </tr>
            ...
         </tbody>
      </table>
   </div>
   <div class="col-md-3">
      <table class="table" id="metasearchTable">
         <thead>
            <tr>
               <th>Brand B</th>
            </tr>
         </thead>
         <tbody>
             <tr class="clickable-row" url="#" productid="2790">
                <td>
                   <div class="row">
                      <div class="col-md-6">
                         <div class="col-md-12">Product 3</div>
                      </div>
                      <div class="col-md-2">
                         <div class="col-md-12 SearchPrice">2.5</div>
                         <div class="col-md-12">la pièce</div>
                      </div>
                      <div class="col-md-4">
                         <img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
                      </div>
                   </div>
                </td>
             </tr>
             <tr class="clickable-row" url="#" productid="2790">
                <td>
                   <div class="row">
                      <div class="col-md-6">
                         <div class="col-md-12">Product 4</div>
                      </div>
                      <div class="col-md-2">
                         <div class="col-md-12 SearchPrice">2</div>
                         <div class="col-md-12">la pièce</div>
                      </div>
                      <div class="col-md-4">
                         <img data-src="holder.js/100x100" class="img-thumbnail" alt="100x100" style="width: 100px; height: 100px;" src="#" data-holder-rendered="true">
                      </div>
                   </div>
                </td>
             </tr>
         </tbody>
      </table>
   </div>
</div>

Answer 1

Searching deeper on the internet I found a solution I could adapt to fit mine : TW Bootstrap: How to overflow columns

Thanks for your time.