Safari css重装错误

Question

我有一个非常奇怪的问题。 首先是我的代码：

<div class="wrapper">
<div class="imageWrapper"><img src="anyimage.jpg" /></div>    
<h1>Headline</h1>
<p>Any content</p>
</div>

我的CSS：

.wrapper {
display: table;
table-layout: fixed;
width: 100%;
}

.imageWrapper {
display: table-footer-group;
}

我希望我的imageWrapper位于wrapper的底部。 但是：我想要我的元素的顺序。

所有浏览器除Safari外都有效。 但是：如果我打开webinspector并禁用display: table-footer-group;并再次启用，则一切正常。

任何解决方案？

由于

编辑：抱歉，我忘了这是智能手机的媒体查询！在桌面上：

@media only screen and ('min-width: 768px') {
    .imageWrapper {
    float: left;
    width: 49%;
    }
    h1, p {
    width: 49%;
    float: right;
    margin-left: 2%;
    }
}

如果我将浏览器从桌面大小调整为智能手机宽度，则查询也会起作用。但如果我在智能手机尺寸上重新加载页面，它就无法工作。