这个 fiddle 演示了我的问题:http://jsfiddle.net/petebere/vbt7mhL5/
对于最大 800px 的屏幕宽度,div 的顺序应与 html 结构中的顺序相同。
但是对于大于 800px 的屏幕宽度我想要
- 绿色 div (panel-1) 贴在文章的左上角;
- 红色 div (panel-2) 贴在文章的右上角;
如图所示:http://s10.postimg.org/q12rv2ewp/flexbox.jpg
到目前为止,我已经能够结合使用“display: flex”和“order”属性来向上移动绿色和红色 div,但我不知道如何将绿色 div 向左移动而红色 div向右。
HTML代码:
<div class="header">
<div class="menu-top">menu-top</div>
</div>
<div class="content">
<div class="article-1">article-1<br>This will be an article about some interesting topic.</div>
<div class="article-2">article-2<br>This will be an article about some interesting topic.</div>
<div class="panel-1">panel-1<br>This should be on left for screen width > 800px.<br>It should 'stick' to the side of the articles.</div>
<div class="article-3">article-3<br>This will be an article about some interesting topic.</div>
<div class="panel-2">panel-2<br>This should be on right for screen width > 800px.<br>It should 'stick' to side of the articles.</div>
<div class="article-4">article-4<br>This will be an article about some interesting topic.</div>
<div class="article-5">article-5<br>This will be an article about some interesting topic.</div>
</div>
<div class="footer">
<div class="menu-bottom">menu-bottom</div>
</div>
CSS:
.header, .footer {
width: 100%;
}
.menu-top, .menu-bottom {
background-color: LightGray;
text-align: center;
}
.content {
display: flex;
flex-direction: column;
text-align: center;
}
.panel-1 {
background-color: ForestGreen;
text-align: center;
}
.panel-2 {
background-color: crimson;
text-align: center;
}
.article-1 {
background-color: LightSteelBlue;
}
.article-2 {
background-color: PaleTurquoise;
}
.article-3 {
background-color: LightBlue;
}
.article-4 {
background-color: LightCyan;
}
.article-5 {
background-color: PowderBlue;
}
@media screen and (min-width:801px) {
.content {
align-items: center;
}
}
@media screen and (min-width:801px) {
.article-1, .article-2, .article-3, .article-4, .article-5 {
width: 400px;
}
}
@media screen and (min-width:801px) {
.panel-1 {
order: -3;
}
}
@media screen and (min-width:801px) {
.panel-2 {
order: -1;
}
}
@media screen and (min-width:801px) {
.article-1 {
order: -2;
}
}
最佳答案
请用您的 CSS 替换此 CSS 它可以解决您的问题。
我还更新了你的 fiddle 演示 http://jsfiddle.net/vbt7mhL5/5/ .
注意:- 在您的 item 列表中再添加一个类(item)以设置宽度。
.header, .footer {
width: 100%;
}
.menu-top, .menu-bottom {
background-color: LightGray;
text-align: center;
}
.content {
display: flex;
flex-direction: column;
text-align: center;
}
.panel-1 {
background-color: ForestGreen;
text-align: center;
}
.panel-2 {
background-color: crimson;
text-align: center;
}
.article-1 {
background-color: LightSteelBlue;
}
.article-2 {
background-color: PaleTurquoise;
}
.article-3 {
background-color: LightBlue;
}
.article-4 {
background-color: LightCyan;
}
.article-5 {
background-color: PowderBlue;
}
@media screen and (min-width:801px) {
.content {
align-items: center;
}
.item{
width: 33.33%
}
/*.article-1, .article-2, .article-3, .article-4, .article-5 {
width: 400px;
}*/
.panel-1 {
order: -3;
position: absolute;
top: 27px;
left: 0;
}
.panel-2 {
align-self: flex-end;
order: -1;
position: absolute;
right: 3px;
top: 27px;
}
.article-1 {
/*order: -2;*/
}
}
如果您得到了答案,请接受我的答案,以便有人轻松获得正确答案。
关于html - 响应式设计改变div的顺序和位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31759474/