为何Flex布局重排div的CSS仅在特定屏幕尺寸下生效？

我使用以下CSS重排两个div：

#flex { display: flex; flex-direction: column; }
.ld-login-modal-login { order: 2; }
.ld-login-modal-register { order: 1; }

这段CSS未嵌套任何媒体查询，但仅在部分屏幕尺寸下生效。通过Safari响应式设计模式测试结果如下：

• iPhone SE（320x568）- div未重排
• iPhone 8竖屏（375x667）- div已重排
• iPhone 8横屏（736x414）- div未重排
• 实际iPhone 11设备 - div未重排

我已尝试在站点头部添加以下代码，但无济于事：

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

由于未使用媒体查询，我无法理解为何CSS仅在特定屏幕尺寸下生效，尝试将CSS嵌套进各类媒体查询也无效果。

内容的提问来源于stack exchange，提问作者Ironlion