javascript - semantic-ui:使用 'doubling row' 类交错网格列行？

Question

我有一个包含两列的 ui 网格 - 左边是偶数项，右边是奇数项。当窗口的宽度减小时，两列变成正确的一列。但是，右栏现在位于左栏下方，这意味着所有偶数项都显示在奇数项之上。

使用加倍行类响应式交错行元素的正确方法是什么？

这是一个证明我观点的 fiddle :https://jsfiddle.net/mikestaub/dhsytqqv/

如何让订单变成:

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

我可以想出一些在 javascript 中实现此目的的方法，但它们看起来都很老套。在 semantic-ui 中有没有合适的方法来处理这个问题？我在文档中找不到任何有帮助的内容。

这是我想要的非语义用户界面示例:http://jsfiddle.net/wa2YQ/

Answer 1

我忘了说我正在将它与 angular 和 ng-repeat 一起使用。这是我发现最适合我的解决方案。以防将来其他人遇到此问题:

<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>