html - 如何使用 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;
}