semantic-ui：使用 'doubling row' class 交错网格列行？

Question

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

使用加倍行响应地交错行项目的正确方法是什么 class？

这里 fiddle 证明了我的观点：https://jsfiddle.net/mikestaub/dhsytqqv/

怎样才能让订单变成：

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

我可以在 javascript 中想到一些实现此目的的方法，但它们看起来都很老套。有没有正确的方法来处理这个语义-ui？我在文档中找不到任何帮助。

这是我想要的非语义-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>

semantic-ui：使用 'doubling row' class 交错网格列行？

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

html

javascript

css

semantic-ui