Javascript 如何在元素不移动时移动它们'；我不适合在屏幕上显示

我想对元素重新排序，类似于

flex wrap:wrap

，但我想对元素重新排序。Youtube就是一个很好的例子。在非移动设备上观看任何Youtube视频。缩小页面后，右侧的推荐视频会出现在描述和评论部分之间。如果他们只使用flex-wrap，推荐的视频将放在评论部分的下面。我将如何做类似的事情

---

我想您可能需要一些javascript，但我不确定如何实现这一点。谢谢

如果使用

display:flex

，则flex项目（即flex容器的子项）有

order

参数，您可以使用该参数定义所需的任何订单，也可以在包装的flex容器内。示例：

顺序：3在一个flex项目上，应该是第三顺序。
问题是，整个左侧（评论部分、描述、视频标题）都在一个div中，id=“primary”（如果您在youtube视频上检查元素，您可以自己找到它）。推荐的视频都在另一个div中，id=“secondary”。即使我按照您所说的做了，并将其添加到id=“primary”和id=“secondary”的父元素中，我仍然只能将一个元素放在另一个元素的上面，反之亦然。抱歉，如果这让人困惑，如果您有任何问题，请提问。在youtube上，移动版本/较小屏幕显然有一个完全不同的HTML结构-建议位于较小屏幕上的“主”元素中。我不知道如何做到这一点（javascript将是首选），但这肯定比重新排序要多一些。是的，没错。我想问的是，如何判断元素是否溢出屏幕，然后在javascript中发生这种情况时重新排序页面。