Html 强制某些Flexbox项目换行到新行，否则不换行

我正在使用一个导航栏（在桌面布局中），它在一行中显示所有元素。它从来没有包装过。我只需设置

flex-flow:row nowrap并且工作正常：


现在在移动设备上，这些项目中的一些将被放置在上面的第二行中，只有在鼠标悬停/单击底部一行时才会显示。
到目前为止，我的进展是用
.hide on mobile标记这些隐藏项和设置<代码>顺序：2和
显示：无在其上，以便始终显示的项目位于前面


我的计划是在最后一次
之后创建某种类型的“换行符”。在手机上隐藏
并将剩余的元素
flexwrap:wrap reverse到顶部。据我所知，像这样的“换行符”可以使用伪元素

但我的主要问题是，我必须启用包装，这可能会弄乱导航栏。我的客户希望以后能够在导航栏上添加/删除项目。因此，在这样的换行之前将移动断点设置为右侧并不是一个解决方案

是否有一种方法可以在flexbox中创建手动换行，但不能自动换行？或者flexbox不是解决这个布局问题的合适方法吗？
我认为这是一个很好的案例。其思想是将项目包装成两行。在移动视图中，两行将一行显示在另一行的顶部。在桌面视图中，由于
display:contents
，所有项目都将具有相同的父项

对于演示
。在移动设备上隐藏当您悬停导航栏时可见的元素

请注意，我之所以使用按钮，只是因为我不知道如何在stackoverflow代码段上模拟响应性设计


//仅用于演示的js代码（因为我不知道如何在stackoverflow代码段中模拟响应视图）
document.getElementById（'mobile'）。addEventListener（'click'，evt=>{
document.getElementById（'nav'）.classList.toggle（'mobile-view'）；
});
#导航{
显示器：flex；
证明内容：之间的空间；
间隙：20px；
}
.副导航{
显示：内容；
}
/*下面的代码应该是媒体内查询和类。移动视图应该被删除*/
#导航移动视图{
显示：网格；
网格模板行：自动；
差距：0；
}
.mobile view>.sub-nav{
显示器：flex；
间隙：20px；
证明内容：之间的空间；
}
.mobile视图>.hide on mobile{
顺序：-1；
显示：无；
}
#nav.mobile视图：悬停>.hide on mobile{
显示器：flex；
}

切换移动视图