如何使用 CSS 网格动态更改我的 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;
}