侧边栏中的 Div 使用 flexbox 拉伸太长

Question

我正在使用 flexbox 创建布局。 我的布局左侧有多个框，右侧边栏中有多个框。

采用宽屏，左右相邻。 在手机屏幕上，左右应该是相互混合的。这张图会更清楚：

我正在尝试使用 flexbox 来完成此任务。 我遇到的问题是大屏幕。 R1 框延伸到 L1 框的底部。你可以在这里看到：demo

因此，在小提琴中，粉红色的 R2 框应该向上移动到 R1 框的文本下方。 R1 框内不应有空白的蓝色空间。

代码如下：

HTML

<div class="container">
  <div class="header">header</div>
  <div class="content">
    <div class="leftContent1">
        L1
    </div>
    <div class="leftContent2">
        L2
    </div>
    <div class="rightContent1">
        R1
    </div>
    <div class="rightContent2">
        R2
    </div>
  </div>
  <div class="footer">footer</div>  
</div>

CSS

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    background-color: lightgrey;
    align-items: center;
}

.header {
    background-color: cornflowerblue;
    width: 100%;
    height: 80px;
    margin: 0px;
}
.content {
    background-color: lightgreen;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-flow:row wrap;
    flex-grow: 1;
    align-content: flex-start;
}
.leftContent1 {
    order:1;
    flex:0 1 100%;
    background-color: gold;
}
.leftContent2 {
    order:3;
    flex:0 1 100%;
    background-color: yellow;
}
.rightContent1 {
    order:2;
    flex:0 1 100%;
    background-color: lightblue;
}
.rightContent2 {
    order:4;
    flex:0 1 100%;
    background-color: pink;
}
.footer {
    background-color: cornflowerblue;
    width: 100%;
    height: 85px;
    margin: 0px;
}

@media all and (min-width: 850px) {
    .content {
        width: 800px;
        margin: 0 auto;
    }
    .leftContent1 {
        order:1;
        flex:0 1 600px;
    }
    .leftContent2 {
        order:3;
        flex:0 1 600px;
    }
    .rightContent1 {
        order:2;
        flex:0 1 200px;
    }
    .rightContent2 {
        order:4;
        flex:0 1 200px;
    }
}

提前致谢！

Answer 1

只要检查是不是这样......

<style>
.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    background-color: lightgrey;
    align-items: center;
}

.header {
    background-color: cornflowerblue;
    width: 100%;
    height: 80px;
    margin: 0px;
}
.content {
    background-color: lightgreen;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-flow:row wrap;
    flex-grow: 1;
    align-content: flex-start;
}
.leftContent1 {
    order:1;
    flex:0 1 100%;
    background-color: gold;
}
.leftContent2 {
    order:2;
    flex:0 1 100%;
    background-color: yellow;
}
.rightContent1 {
    order:3;
    flex:0 1 100%;
    background-color: lightblue;
}
.rightContent2 {
    order:4;
    flex:0 1 100%;
    background-color: pink;
}
.footer {
    background-color: cornflowerblue;
    width: 100%;
    height: 85px;
    margin: 0px;
}

@media all and (min-width: 850px) {
    .content {
        width: 800px;
        margin: 0 auto;
    }
    .leftContent1 {
        order:1;
        flex:0 1 600px;
    }
    .leftContent2 {
        order:3;
        flex:0 1 600px;
    }
    .rightContent1 {
        order:2;
        flex:0 1 200px;
    }
    .rightContent2 {
        order:4;
        flex:0 1 200px;
    }
}
</style>

<div class="container">
  <div class="header">header</div>
  <div class="content">
    <div class="leftContent1">
        L1
    </div>
    <div class="leftContent2">
        L2
    </div>
    <div class="rightContent1">
        R1
    </div>
    <div class="rightContent2">
        R2
    </div>
  </div>
  <div class="footer">footer</div>  
</div>