根据宽度更改 div 顺序

Question

我在一个包装器中并排有 3 个div，使用：

    <div id="left"><h1>title left</h1></div>
    <div id="right"><h1>title right</h1></div>
    <div id="center"><img src="img/titleimage.jpg"  alt=""/></div>

与 CSS 对齐如下：

#left{
width:250px;
float:left;
margin:200px auto;
position:relative;
}
#right{
width:250px;
float:right;
position:relative;
margin:200px auto;
}
#center{
margin:60px auto;
margin-bottom:0;
width:500px;
position:relative;
float:left;
}

我希望div 在浏览器窗口变小时重新排序。我希望它们像这样从上到下显示：

左
右
中心

甚至更好

中心
左
右

有什么想法吗？

Answer 1

将中心div 一直移动到顶部

<div id="center"><img src="img/titleimage.jpg"  alt=""/></div>
<div id="left"><h1>title left</h1></div>
<div id="right"><h1>title right</h1></div>

Answer 2

我认为

这里的关键是从小屏幕优先的方法考虑这个问题。

如果你的项目可以使用flexbox，你可以使用它并使用CSS更改div的顺序，但我敢打赌事实并非如此。我认为一旦你进入更大的屏幕，你将不得不使用一些绝对定位来让它工作。这是一个例子：和一个小提琴

.HTML

<div class="container">
    <div class="inner-w">
        <div class="block center">Center</div>  
        <div class="block left">Left</div>
        <div class="block right">Right</div>
    </div>
</div> <!-- .container -->

.CSS

* {
    box-sizing: border-box;
}
.container {
    width: 100%;
    float: left;
    overflow: hidden; /* should be clearfix instead */
}
.container .inner-w {
    position: relative;
    max-width: 50em;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden; /* should be clearfix instead */
}
.block {
    width: 100%;
    float: left;
    min-height: 10em; /* just for show */
}
@media (min-width: 50em) {  
    .center {
        width: 50%;
        position: relative;
        left: 25%;
    }
    .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 25%;
    }
    .right {
        float: right;
        width: 25%;    
    }
} /* end break-point */