使第二个div首先出现在上面,没有绝对位置或更改html

Question

我的页面被分成3个切片,如此JFiddle所示.

在我的完整源代码中,我有媒体查询来帮助管理移动和桌面之间的大小调整.当有人在移动模式下访问该网站时,Logo应显示在顶部,而Items应显示在其下方.(我display: none在我的图片div上设置隐藏它)

问题:

我无法在HTML中更改div的位置,否则会干扰我当前的3切片布局.绝对定位不是一个选项,因为我的大多数网站已经动态调整大小,我不希望绝对定位干扰我没有测试过的分辨率.这意味着计算边际尺寸也是不可能的.

因此,不允许绝对定位,也不改变div的顺序.我正在寻找的结果将类似于此,异常没有重新定位div.

我的问题不是媒体查询,也不是如何使用媒体查询调整移动设备的大小.我只询问如何获得我想要的布局和限制(没有绝对定位,没有计算边距,没有更改div顺序).

我看过的其他问题:

重新定位div高于前面的元素 - 第一个答案建议重新定位div,这是我不能做的.第二个答案依赖于计算位置,这可能会干扰其他动态尺寸元素.

移动第一个Div出现在CSS中的第二个 - 建议我使用绝对定位,这是我做不到的

Answer 1

Flexbox布局是你的朋友.display: 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>

display: flex仅适用于现代浏览器.检查caniuse.

我的Android手机上的测试显示它可以在Firefox和Chrome上运行,但不能在Android浏览器上运行.