如何将右侧 div 移到左侧内容 div 上方答案

【问题标题】：How to move Right aside div above Left content div如何将右侧 div 移到左侧内容 div 上方
【发布时间】：2015-05-21 02:54:29
【问题描述】：

我有两个 div，一个主要的左侧内容和一个右侧。使用媒体查询（随着屏幕变小），我希望左侧内容 div 向下移动并允许右侧 div 在其上方移动。

这是我目前拥有的...

HTML：

    <div id="content">content</div>
    <div id="aside">aside</div>

CSS：

    #content {
    color:white;
    width:70%;
    background: #111; height: 100px;
    position:inline;
    float:left;}

    #aside { 
    float: right; 
    background: #CCC; height: 100px;width: 100px;}

    @media screen and (max-width: 500px){
    #content {
    width: 100%; 
    margin-left: 0px;
    clear: both;
    }}

请看这里：https://jsfiddle.net/kaveman71/n55444ca/1/

目前，当调整较小时，aside div 会移动到 content div 下方（通常），但我希望发生相反的情况；旁边的 div 应该移动到左侧内容 div 的上方（而不是字面上的顶部）。

因此，当缩小尺寸时，结果应该是灰色的侧边框弹出上方黑色内容框。

有没有办法用 CSS 做到这一点？还是我需要求助于 JavaScript？如果JS是唯一的方法，谁能举个例子？

谢谢，

【问题讨论】：

非常感谢@Héctor E & Alex Wright！亚历克斯，如果你比赫克托早一分钟，我可以将你的标记为正确，但事实上，赫克托的建议足以达到预期的结果。非常感谢你们！
注意：position: inline 不存在：你正在混合 display: inline|inline-block|many other possible values 和 position: relative|absolute|static|fixed
如果必须保持 HTML 顺序（因为没有人会让您更改它，或者因为在主要内容之前放置在语义上没有意义），其他解决方案是 CSS flexbox 和有点 hackish display: table-caption在第二个元素上（分别是 IE10+ 和 IE8+）

标签： css responsive-design resize

【解决方案1】：

如果你颠倒了 div 的顺序，当全屏由 css 定义时它们的位置，它应该在调整大小时将 aside 放在内容上。

<div id="aside">aside</div>
<div id="content">content</div>

【讨论】：

【解决方案2】：

首先想到的是在 HTML 内容顺序中将放在首位。

<div id="aside"></div>
<div id="content"></div>

默认情况下，aside 会在内容 div 之上。

然后，通过媒体查询，您可以将内容放在一边的左侧，使用类似：

@media (min-width: 500px) {
    #content {
        float: left;
        width: 70%;
    }
    #aside {
        float: right;
        width: 100px
    }

}

【讨论】：