如何使用CSS Grid动态更改div顺序？

Question

我用这个规范创建了一个CSS网格：

我有两列，每列有50％的宽度。

.section-grid {
    display: grid;
    grid-template-rows: 1fr; 
    grid-template-columns: 50% 50%;
}

<div class="section-grid">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
</div>

如何使用CSS网格更改排序，以便显示div 3和4，就像它们已被更改一样？我将动态使用它，因为我看到两个div是一行，每一行应该更改。

我为此创造了一支笔：https://codepen.io/anon/pen/mpwKEw

我想拥有与上面相同的标记，但它应显示为：

One | Two
Four | Three
Five | Six
Eight | Seven

Answer 1

尝试使用'order'和div：nth-​​of-type（）：

.section-grid {
  display: grid;
  grid-template-rows: 1fr; 
  grid-template-columns: 50% 50%;
}

.section-grid div:nth-of-type(1) {
  order: 1;
}

.section-grid div:nth-of-type(2) {
  order: 2;
}

.section-grid div:nth-of-type(3) {
  order: 4;
}

.section-grid div:nth-of-type(4) {
  order: 3;
}