Jquery 更改弹性项的顺序

我有一个包含多个div的容器，并且正在使用flexbox模型。我希望使用css实现以下功能，尽管我无法更改div标记的顺序

在第二行中，值为“8”的div必须排在第一位

我已经附上了链接

.container{
位置：相对位置；
显示器：flex；
柔性流：行换行；
//调整项目：灵活启动；
对齐内容：周围的空间；
调整内容：灵活启动；
}
.项目{
背景色：番茄；
框大小：边框框；
填充：20px；
外形：2倍纯蓝；
弹性基准：20%；
}
.里面的物品{
显示：无；
背景色：#阿巴巴；
框大小：边框框；
填充：20px；
轮廓：1px纯红；
弹性基准：80%；
}
.表演{
显示：块；
}
.隐藏{
显示：无；
}

1.
2.
3.
4.
5.
8.
7.
6.
9
10
11
8.
12

如果我理解最终目标，您可以使用

：nth-child（）

和

顺序来重新排序


.container{
位置：相对位置；
显示器：flex；
柔性流：行换行；
//调整项目：灵活启动；
对齐内容：周围的空间；
调整内容：灵活启动；
}
.项目{
背景色：番茄；
框大小：边框框；
填充：20px；
外形：2倍纯蓝；
弹性基准：20%；
}
.里面的物品{
显示：无；
背景色：#阿巴巴；
框大小：边框框；
填充：20px；
轮廓：1px纯红；
弹性基准：80%；
}
.表演{
显示：块；
}
.隐藏{
显示：无；
}
.项目：第n个子项（-n+5），.项目：第n个子项（8）{
顺序：-1；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
如果我理解最终目标，您可以使用
：nth-child（）
和
顺序来重新排序


.container{
位置：相对位置；
显示器：flex；
柔性流：行换行；
//调整项目：灵活启动；
对齐内容：周围的空间；
调整内容：灵活启动；
}
.项目{
背景色：番茄；
框大小：边框框；
填充：20px；
外形：2倍纯蓝；
弹性基准：20%；
}
.里面的物品{
显示：无；
背景色：#阿巴巴；
框大小：边框框；
填充：20px；
轮廓：1px纯红；
弹性基准：80%；
}
.表演{
显示：块；
}
.隐藏{
显示：无；
}
.项目：第n个子项（-n+5），.项目：第n个子项（8）{
顺序：-1；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
使用CSS属性

默认情况下，所有弹性项目都设置为
顺序：0

具有相同顺序值的元素将按照它们在源代码中出现的顺序呈现

div.item:nth-child(1)  { order: -1 }
div.item:nth-child(2)  { order: -1 }
div.item:nth-child(3)  { order: -1 }
div.item:nth-child(4)  { order: -1 }
div.item:nth-child(5)  { order: -1 }
div.item:nth-child(6)  { order:  1 }
div.item:nth-child(7)  { order:  1 }
div.item:nth-child(8)  { order:  0 }
div.item:nth-child(9)  { order:  1 }
div.item:nth-child(10) { order:  1 }
div.item:nth-child(11) { order:  1 }
div.item:nth-child(12) { order:  1 }


.container{
位置：相对位置；
显示器：flex；
柔性流：行换行；
/*调整项目：灵活启动*/
对齐内容：周围的空间；
调整内容：灵活启动；
}
.项目{
背景色：番茄；
框大小：边框框；
填充：20px；
外形：2倍纯蓝；
弹性基准：20%；
}
.里面的物品{
显示：无；
背景色：#阿巴巴；
框大小：边框框；
填充：20px；
轮廓：1px纯红；
弹性基准：80%；
}
.表演{
显示：块；
}
.隐藏{
显示：无；
}
分部项目：第n个子项（1）{
订单：-1
}
分部项目：第n个子项（2）{
订单：-1
}
分部项目：第n个子项（3）{
订单：-1
}
分部项目：第n个子项（4）{
订单：-1
}
分部项目：第n个子项（5）{
订单：-1
}
分部项目：第n个子项（6）{
订单：1
}
分部项目：第n个子项（7）{
订单：1
}
分部项目：第n个子项（8）{
订单：0
}
分部项目：第n个子项（9）{
订单：1
}
分部项目：第n个子项（10）{
订单：1
}
分部项目：第n个子项（11）{
订单：1
}
分部项目：第n个子项（12）{
订单：1
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
使用CSS属性

默认情况下，所有弹性项目都设置为
顺序：0

具有相同顺序值的元素将按照它们在源代码中出现的顺序呈现

div.item:nth-child(1)  { order: -1 }
div.item:nth-child(2)  { order: -1 }
div.item:nth-child(3)  { order: -1 }
div.item:nth-child(4)  { order: -1 }
div.item:nth-child(5)  { order: -1 }
div.item:nth-child(6)  { order:  1 }
div.item:nth-child(7)  { order:  1 }
div.item:nth-child(8)  { order:  0 }
div.item:nth-child(9)  { order:  1 }
div.item:nth-child(10) { order:  1 }
div.item:nth-child(11) { order:  1 }
div.item:nth-child(12) { order:  1 }


.container{
位置：相对位置；
显示器：flex；
柔性流：行换行；
/*调整项目：灵活启动*/
对齐内容：周围的空间；
调整内容：灵活启动；
}
.项目{
背景色：番茄；
框大小：边框框；
填充：20px；
外形：2倍纯蓝；
弹性基准：20%；
}
.里面的物品{
显示：无；
背景色：#阿巴巴；
框大小：边框框；
填充：20px；
轮廓：1px纯红；
弹性基准：80%；
}
.表演{
显示：块；
}
.隐藏{
显示：无；
}
分部项目：第n个子项（1）{
订单：-1
}
分部项目：第n个子项（2）{
订单：-1
}
分部项目：第n个子项（3）{
订单：-1
}
分部项目：第n个子项（4）{
订单：-1
}
分部项目：第n个子项（5）{
订单：-1
}
分部项目：第n个子项（6）{
订单：1
}
分部项目：第n个子项（7）{
订单：1
}
分部项目：第n个子项（8）{
订单：0
}
分部项目：第n个子项（9）{
订单：1
}
分部项目：第n个子项（10）{
订单：1
}
分部项目：第n个子项（11）{
订单：1
}
分部项目：第n个子项（12）{
订单：1
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12