Flexbox：单列到堆叠的多列

Question

我经常遇到这种布局问题：

小屏幕 - 项目堆叠在一行中，通常是一张图片，然后是一些文本，然后是一个较小的子区域，用于额外的杂项：

中屏及以上 - 项目重新排列为 2 列，左侧为图像和其他内容，右侧为文本：

我觉得我应该可以使用 flexbox 来做到这一点，但我不知道怎么做。我知道我可以使用以下方法排列列中的项目：

.container {
    display: flex;
    flex-flow: column wrap;
}
.one,
.two,
.three {
    width: 50%;
}
.one {
    order: 1;
}
.two {
    order: 3;
}
.three {
    order: 2;
}

但问题是似乎没有办法在不设置固定高度的情况下将项目分成 2 列，这显然不适合响应式。

有没有办法强制柱子在某些点断裂？

Answer 1

你可以这样做。通过使宽度为移动尺寸 100%。他们占据了自己的路线。

.container {
    width: 75%;
    margin: 0 auto;
}
.box1, .box2, .box3 {
    width: 50%;
}
.box1 {
    background-color: blue;
    float:left;
}
.box2 {
    background-color: green;
    float: right;
}
.box3 {
    background-color: purple;
    float: left;
}
@media screen and (max-width: 800px) {
    .box2 {
        float: left;
    }

    .box1,.box2,.box3 {
        width: 100%;
    }

}

JSFIDDLE