Html 变更了响应设计中的块顺序赢得'；你不能在智能手机上工作吗？

我试图找出我在编写第一个（！）响应式网站时遇到的一个难题

在移动版中，我设置了媒体查询，使“nav”元素向下移动，正好在页脚之前，而在大屏幕上，它通常设置在页眉之后

我像这样使用flexbox

#layout {
  display: flex;
  flex-direction: column;
} 

并将订单3分配给页脚，2分配给导航-在我的电脑上，调整浏览器的大小，它的效果是金色的

然而，当我在智能手机（iPhone3，运行Safari）上测试它时，它会完全忽略指令吗？除了低分辨率外，我还有什么方法可以在移动设备上实现这一点吗？

@媒体和全部（最大宽度：480px）{
#布局{
显示器：flex；
弯曲方向：立柱；
}
.页脚{
顺序：3；
}
.导航{
顺序：2；
}
}

占位符
这就是navbar将要去的地方
这是页脚

@媒体和全部（最大宽度：480px）{
#布局{
显示器：flex；
弯曲方向：立柱；
}
.页脚{
顺序：3；
}
.导航{
顺序：2；
}
}

占位符
这就是navbar将要去的地方
这是页脚

问题可能与Safari浏览器要求某些css规则使用-webkit-前缀有关。你能试试这个吗

.element {order: 1; -webkit-order: 1;}

---

问题可能与Safari浏览器要求某些css规则使用-webkit-前缀有关。你能试试这个吗

.element {order: 1; -webkit-order: 1;}

@媒体和全部（最大宽度：480px）{
#布局{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
.页脚{
顺序：3；
-网络工具包订单：3份；
}
.导航{
顺序：2；
-网络工具包订单：2份；
}
}

占位符
这就是navbar将要去的地方
这是页脚

@媒体和全部（最大宽度：480px）{
#布局{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
.页脚{
顺序：3；
-网络工具包订单：3份；
}
.导航{
顺序：2；
-网络工具包订单：2份；
}
}

占位符
这就是navbar将要去的地方
这是页脚

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。请参阅。寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码，最好是在一个文档中。看，试过了，但还是没有结果；iPhone显示的DOM与页面上显示的完全相同。我想在comp上下载Safari，看看这是不是浏览器问题，或者是我手机的浏览器版本——可能是因为它太过时了，因为更新不会在IOS6上运行。好吧，这肯定只是Safari，而不是我手机上的安装；在comp上，它做了完全相同的事情，而其他浏览器（Chrome/Chrome、Firefox和IE）都运行良好。你知道我该怎么解决这个问题吗？现在，我已经作弊并添加了第二个div，它与nav的内容相同，只设置为display:block，屏幕分辨率较低，这是有效的。但这不是最漂亮的黑客。尝试过，但仍然没有结果；iPhone显示的DOM与页面上显示的完全相同。我想在comp上下载Safari，看看这是不是浏览器问题，或者是我手机的浏览器版本——可能是因为它太过时了，因为更新不会在IOS6上运行。好吧，这肯定只是Safari，而不是我手机上的安装；在comp上，它做了完全相同的事情，而其他浏览器（Chrome/Chrome、Firefox和IE）都运行良好。你知道我该怎么解决这个问题吗？现在，我已经作弊并添加了第二个div，它与nav的内容相同，只设置为display:block，屏幕分辨率较低，这是有效的。但这不是最漂亮的黑客。