为什么flexbox页脚不能在移动设备上工作?

我正在练习使用flexbox构建页脚。我目前正在构建的页脚在桌面上可以正常工作,但在移动设备上不能。

这里是: http://codepen.io/FullMetalAlchemist3/pen/bwzEYL/

当我在桌面上调整页脚大小时,此媒体查询有效,并且从列布局到行的转换是流动的:

@media (min-width: 850px) {
.footer {
display: flex;
padding: 10px;
flex-flow: row;
}  

但是,如果在移动设备上进行检查,页脚内容将保留在一行中。我不明白为什么会这样。在移动设备上,页脚应在列中,因为850px以下的屏幕将运行原始flex流,该流设置为列布局:

.footer {
display: flex;
padding: 10px;
flex-flow: column;
justify-content: center;
}

我认为问题与页脚没有正确收缩有关。手机的页脚宽度是980px,所以我可以看到为什么它仍然是一行,但为什么它这么宽?为什么它的收缩方式与在桌面窗口中调整大小时的收缩方式不同?

任何帮助都将不胜感激!