响应式设计改变 div 的顺序和位置

Question

这个小提琴演示了我的问题：http://jsfiddle.net/petebere/vbt7mhL5/

对于高达 800 像素的屏幕宽度，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;
    }
}

Answer 1

请用你的 CSS 替换这个 CSS 可以解决你的问题。

我也更新了你的小提琴演示 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;*/
    }
}

如果你得到了你的答案，那么请接受我的答案，所以有人很容易得到正确的答案。