title: Bootstrap Using Row & Col with Angular List Ordering
body: <p>Is there a way in bootstrap &amp; angular to have a list split into columns like this, notice it puts the first 4 entries into first column, before populating the second column.</p>
  
  <pre><code>a     e
  b     f
  c     g
  d     h
  </code></pre>
  
  <p>Here is my example code which doesn't put them in the desired order:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-6" *ngFor="let item of ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']"&gt;
          {{ item }}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which outputs like this, you can see the order of the letters isn't correct, it's doing it row by row:</p>
  
  <pre><code>a     b
  c     d
  e     f
  g     h
  </code></pre>