我的页面分为3个切片,如
JFiddle所示.
在我的完整的源代码中,我有媒体查询来帮助管理移动和桌面之间的大小.当有人以移动模式访问该网站时,徽标应显示在顶部,“项目”应显示在其下方. (我设置显示：我的图片div上没有隐藏)
问题：
我不能改变HTML中的div的位置,否则会打扰我目前的3片布局.绝对定位不是一个选择,因为我的大部分站点已经动态调整大小,我不希望绝对定位来干扰我还没有测试过的分辨率.这意味着计算边际尺寸将不在此问题之内.
所以绝对定位是不允许的,也不是改变div的顺序.我正在寻找的结果将类似于this,没有重新定位div.
我的问题不在于媒体查询,还是如何使用媒体查询来规模移动.我只是问我如何得到我想要的布局我们有限制(没有绝对假设,没有计算边距,没有改变的div顺序).
我看过的其他问题
Reposition div above preceding element – 第一个回答提示重新定位div,我不能做.第二个答案依赖于计算位置,这可能会干扰其他动态调整元素.
Move The First Div Appear Under the Second One in CSS – 建议我使用绝对定位,我不能做
解决方法
FlexBox布局是您的朋友.显示：flex可以用于交换布局上的元素位置.
#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }
<div id="container">
<div id="items">Items</div>
<div id="logo">logo</div>
<div id="picture">Picture</div>
</div>
我的Android手机测试显示它在Firefox和Chrome上工作,但不是在Android的浏览器上.
