Html 两个网格项的变更顺序

我有一个网格，里面有4个div

.d-grid{
显示：网格；
网格模板列：重复（2，最小值（0，1fr））；
栅隙：80px；
}

---

然后在我的移动视图中，我想将第2列的顺序改为1。我该怎么做？使用flex，我可以反转列，如何将项目2与1交换？

您可以使用以下属性：网格列开始、网格列结束、网格行开始、网格行结束和位置

代码示例：

.item-2 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  position: relative;
}
.item-4 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
  position: relative;
}

如果您想了解更多信息：

请使用订单：