Html 如何重新排列网格项并颠倒其顺序？

我有六个A-F分区

我很难通过响应方式来实现css网格，以符合以下标准：

所有的div都应该具有相同的宽度

在C到D之间，我需要在扩展窗口屏幕时增加空间。（向右推D-F）。如上图所示

收缩时，容器div D-F应位于顶部，并具有相同的宽度div。如图所示：

以下是我迄今为止的代码：

<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
</div>

.container {

  background-color: #ddd;

  display: grid;

  /*grid-template-rows: repeat(2, minmax(150px, min-content));*/
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  /* grid-auto-rows: 150px;*/

  .item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  background-color: orangered; 

    &--1 { background-color: orangered; }
    &--2 { background-color: yellowgreen; }
    &--3 { background-color: blueviolet; }
    &--4 { background-color: palevioletred; }
    &--5 { background-color: royalblue; }
    &--6 { background-color: goldenrod; }
    &--7 { background-color: crimson; }
    &--8 { background-color: darkslategray; }
 }
}

A.
B
C
D
E
F
.集装箱{
背景色：#ddd；
显示：网格；
/*网格模板行：重复（2，最小值（150px，最小内容））*/
网格模板列：重复（3，最小值（100px，1fr））；
/*网格自动行：150px*/
.项目{
填充：10px；
颜色：白色；
字体系列：无衬线；
字体大小：30px；
背景颜色：橙色；
&--1{背景色：橙色；}
&--2{背景色：黄绿色；}
&--3{背景色：蓝紫色；}
&--4{背景色：淡紫色；}
&--5{背景色：皇家蓝；}
&--6{背景色：黄花；}
&--7{背景色：深红色；}
&--8{背景色：深灰色；}
}
}

这里有一个简单的解决方案：

• 使用

  网格模板区域

  属性排列网格项
使用一个空列，用“代码> 1FR在中间创建空格。
• 使用媒体查询触发布局之间的切换

.container{
显示：网格；
网格自动列：最小最大值（100px，1fr）；
/*或者，允许中间空列收缩到100px以下：
网格模板列：重复（3，最小值（100px，1fr））1fr重复（3，最小值（100px，1fr））*/
网格模板区域：“item1 item2 item3.item4 item5 item6”；
}
@介质（最大宽度：600px）{
.集装箱{
网格模板区域：“项目4项目5项目6”
“第1项第2项第3项”；
/*如果使用上面的注释部分，请在此处添加以下代码：
网格模板列：重复（3，最小值（100px，1fr））*/
}
}
.item--1{网格区域：item1；背景色：橙色；}
.item--2{网格区域：item2；背景色：黄绿色；}
.item--3{网格区域：item3；背景色：蓝紫色；}
.item--4{网格区域：item4；背景色：淡紫色；}
.item--5{网格区域：item5；背景色：皇家蓝；}
.item--6{网格区域：item6；背景色：黄花；}
.item--7{网格区域：item7；背景色：深红色；}
.item--8{网格区域：item8；背景色：深灰色；}
.项目{
填充：10px；
颜色：白色；
字体系列：无衬线；
字体大小：30px；
}

A.
B
C
D
E
F

另一个选项是在普通视图中使用7列布局，并通过跳过中间列将

D

放置在第5列中。在移动视图中，您可以使用3列布局，然后将

D-F

元素移动到第一行-请参见下面的演示：

.container{
背景色：#ddd；
显示：网格；
网格模板列：重复（7，最小值（100px，1fr））；/*7列*/
}
.项目4{
网格列：5；/*跳过一列*/
}
@媒体屏幕和屏幕（最大宽度：900px）{
.集装箱{
网格模板列：重复（3，最小值（100px，1fr））；/*移动视图中的3列*/
}
.项目4{
网格列：自动；/*重置列*/
}
.项目--4、.项目--5、.项目--6{
网格行：1；/*移到第一行*/
}
}
/*表达风格*/
.项目{
填充：10px；
颜色：白色；
字体系列：无衬线；
字体大小：30px；
背景颜色：橙色；
}
.item--1{背景色：橙色；}
.item--2{背景色：黄绿色；}
.item--3{背景色：蓝紫色；}
.item--4{背景色：淡紫色；}
.item--5{背景色：皇家蓝；}
.item--6{背景色：黄花；}
.item--7{背景色：深红色；}
.item--8{背景色：深灰色；}

A.
B
C
D
E
F