Arrange columns as size in bootstrap - css

Question

I am dynamically printing bootstrap columns divs as follows using angular2
[col-md-6][col-md-12][col-md-6][col-md-12][col-md-6][col-md-12][col-md-6][col-md-12]
but the actual grid is appearing as
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
I want to arrange columns like
[col-md-6][col-md-6]
[col-md-12]
[col-md-12]
[col-md-6][col-md-6]
[col-md-12]
[col-md-12]
Here is the code
<div class="row">
<span *ngFor="let serviceItem of dashboardServicesList">
<div class="col-md-6 {{serviceItem.service}}-service">
<div class="service">
<a *ngIf="serviceItem.categoryHashmap" (click)="showSegments($event,serviceItem.service)">
<span class="service-title">{{serviceItem.displayName}}</span>
<i class="fa {{serviceItem.chevron}}" aria-hidden="true"></i>
</a>
</div>
</div>
<div *ngIf="serviceItem.categoryHashmap" class="col-md-12 segments {{serviceItem.is_active}} {{serviceItem.service}}">
<ul class="segments-boxes">
<li *ngFor="let item of serviceItem.serviceSegments">
<a target="_blank" href="{{item.url}}">{{item.displayName}}</a>
</li>
</ul>
</div>
</span>
</div>
How to arrange this ? thank you.

Answer 1

The reason why this is happening is because of the sequence you're using.
col-md-6 + col-md-12 = col-md-18
This won't fit on one row and thats why it isn't working.
Fix your sequence and add row's to it, output as example below:
[row][col-md-6][col-md-6][row][row][col-md-12][row][row][col-md-12][row][row][col-md-6][col-md-6][row][row][col-md-12][row]
Hope this helps!