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

Question

我有两个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 移动到内容 div 下方（通常），但我希望相反的情况发生； aside div 应该移到左侧内容 div 的上方（不是字面上的上方）。

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

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

谢谢，

k

Answer 1

如果您颠倒 div 的顺序，因为它们在全屏时的位置由 css 定义，它应该在调整大小时将内容放在一边。

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

Answer 2

第一个想到的是HTML内容顺序放在最前面

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

默认情况下，旁白位于内容 div 之上。

然后，通过媒体查询，您可以将内容放在旁边，使用如下内容：

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

}

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

How to move Right aside div above Left content div

css

resize

responsive-design