semantic-ui: interleaving grid column rows using 'doubling row' class?

Question

I have a ui grid with two columns - the left has even items, the right has odd. When the width of the window decreases, the two columns become one which is correct. However, the right column is now under the left column, meaning all even items are showing on top of the odd items.

What is the proper way to interleave row items responsively using the doubling row class?

Here is a fiddle demonstrating my point: https://jsfiddle.net/mikestaub/dhsytqqv/

How can I make the order become:

c1-item1
c2-item1
c1-item2
c2-item2

I can think of some ways to achieve this in javascript, but they all seem hacky. Is there a proper way to handle this in semantic-ui? I could not find anything in the docs that helped.

Here is a non-semantic-ui example of what I want: http://jsfiddle.net/wa2YQ/

Answer 1

I forgot to mention that I am using this with angular and ng-repeat. Here is the solution I found works best for me. In case anyone else runs into this in the future:

<div class='ui grid'>
  <div class='doubling two column row' ng-repeat='item in items' ng-if='$even'>
    <div class='column'>
      {{ item.num }}
    </div>
    <div class='column'>
      {{ items[$index+1].num }}
    </div>
  </div>
</div>