Autopopulation Bootstrap grid layout

Question

I am creating a megamenu, but it's for a template, therefore I cannot assume the data structure in advance and it needs to be injected dynamically. I am using the Bootstrap grid and Handlebars.js for templating, my .hbs html is as follows:

.hbs

<li class="col-sm-2">
  <div class="nav-accordion">
    {{#each header.navMenu.women.children}}
      <h3>{{title}}</h3>
      <ul>
        {{#each children}}
          <li><a href="{{url}}">{{title}}</a></li>
        {{/each}}
      </ul>
    {{/each}}
  </div>
</li>

The problem is that it is loading the JSON data only in the first col-sm-2 only and I cannot separate the data flow from handlebars by dividing it in a few col-sm-2's, there should be a total of 4x col-sm-2's and I leave 4 more for a image. Is there a way to autopopulate the other columns, let's after a certain number of elements with JS or maybe some CSS play with the overflow property?