问题超出了CSS，因此已经结束。
根据使用的视口，我有几个区域的内容需要按照其他顺序排列。
在大屏幕上，我想要两列，在小屏幕上，我想要一列-内容按另一顺序排列，反之亦然。
我试图在下图中显示布局。文字中是大视口的布局和框的顺序。
如果可能的话，我真的很想保留flex-columns。我尝试设置order属性，但没有成功。
我已经更新了以下代码，因此可以清楚地显示我正在尝试执行的操作。 在下面调整大小应该是不言自明的，但在较大的视口中，我需要两列内容，而在较小的视口中，则需要其他顺序。
@media only screen and (min-width: 601px) {
p {
margin: 0;
}
.container {
width: 100%;
min-height: 100%;
background: yellow;
align-content: flex-start;
display: flex;
display: -webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
.flexcolumntop {
flex: 50%;
max-width: 50%;
margin: 0;
}
.flexcolumnbottom {
flex: 50%;
max-width: 50%;
margin: 0;
}
.red {
background: red;
width: 150px;
height: 150px;
text-align: center;
}
.blue {
background: blue;
width: 150px;
height: 150px;
text-align: center;
}
.green {
background: green;
width: 150px;
height: 150px;
text-align: center;
}
.lime {
background: lime;
width: 150px;
height: 150px;
text-align: center;
}
.pink {
background: pink;
width: 150px;
height: 150px;
text-align: center;
}
.gray {
background: gray;
width: 150px;
height: 150px;
text-align: center;
}
}
@media only screen and (max-width: 600px) {
p {
margin: 0;
}
.container {
width: 100%;
min-height: 100%;
background: yellow;
align-content: flex-start;
display: flex;
display: -webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
.flexcolumntop {
flex: 100%;
max-width: 100%;
margin: 0 auto;
}
.flexcolumnbottom {
flex: 100%;
max-width: 100%;
margin: 0 auto;
}
.red p::before {
content: "Order: 2";
}
.red {
background: red;
width: 150px;
height: 150px;
text-align: center;
}
.blue p::before {
content: "Order 5: ";
}
.blue {
background: blue;
width: 150px;
height: 150px;
text-align: center;
}
.green p::before {
content: "Order: 1";
}
.green {
background: green;
width: 150px;
height: 150px;
text-align: center;
}
.lime p::before {
content: "Order: 4";
}
.lime {
background: lime;
width: 150px;
height: 150px;
text-align: center;
}
.pink p::before {
content: "Order: 6";
}
.pink {
background: pink;
width: 150px;
height: 150px;
text-align: center;
}
.gray p::before {
content: "Order: 3";
}
.gray {
background: gray;
width: 150px;
height: 150px;
text-align: center;
}
}<div class="container">
<div class="flexcolumntop">
<div class="red">
<p>
Red
</p>
</div>
<div class="blue">
<p>
Blue
</p>
</div>
<div class="pink">
<p>
Pink
</p>
</div>
</div>
<div class="flexcolumnbottom">
<div class="green">
<p>
Green
</p>
</div>
<div class="gray">
<p>
Gray
</p>
</div>
<div class="lime">
<p>
Lime
</p>
</div>
</div>
</div>
答案 0 :(得分：2)
使用flexbox和order可以轻松解决此问题，而且您还必须像现在一样摆脱使用flex-columns的分组（您只能对同一父级中的列进行重新排序，因此如果它们没有相同的父对象，则无法进行例如绿色->红色->灰色的操作。
稍微清理一下CSS并添加.morder类，这些类仅设置移动版本的顺序。 html也进行了一些小的更改（每个彩色元素现在都有一个.flexcol父元素，并且这些元素的排序方式有所不同-但这也可以通过在桌面上使用order属性来避免）：）
p {
margin: 0;
}
.container {
width: 100%;
min-height: 100%;
background: yellow;
align-content: flex-start;
display: flex;
display: -webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
.flexcol {
flex: 50%;
margin: 0;
}
.red, .blue, .green, .lime, .pink, .gray {
width: 150px;
height: 150px;
text-align: center;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.lime {
background: lime;
}
.pink {
background: pink;
}
.gray {
background: gray;
}
@media only screen and (max-width: 600px) {
.flexcol {
flex: 100%;
}
.morder-1 {
order: 1;
}
.morder-2 {
order: 2;
}
.morder-3 {
order: 3;
}
.morder-4 {
order: 4;
}
.morder-5 {
order: 5;
}
.morder-6{
order: 6;
}
}<div class="container">
<div class="flexcol morder-2">
<div class="red">
<p>
Red
</p>
</div>
</div>
<div class="flexcol morder-1">
<div class="green">
<p>
Green
</p>
</div>
</div>
<div class="flexcol morder-5">
<div class="blue">
<p>
Blue
</p>
</div>
</div>
<div class="flexcol morder-3">
<div class="gray">
<p>
Gray
</p>
</div>
</div>
<div class="flexcol morder-6">
<div class="pink">
<p>
Pink
</p>
</div>
</div>
<div class="flexcol morder-4">
<div class="lime">
<p>
Lime
</p>
</div>
</div>
</div>
答案 1 :(得分：0)
使用Grid layout可以定义模板，该模板定义子元素的布局方式，当您指定grid-template-areas时，您可以定义子元素在网格布局下的放置方式。而且，当要修改某些视口上的元素顺序时，您只需更改grid-template-areas并在每个子元素上定义grid-area即可指定该元素将在哪里
.container {
width: 100%;
min-height: 100%;
background: yellow;
align-content: flex-start;
display: grid;
grid-template-areas: "topblue topred"
"bottomgray bottomgreen";
}
.red {
grid-area: topred;
background: red;
text-align: center;
}
.blue {
grid-area: topblue;
background: blue;
text-align: center;
}
.green {
grid-area: bottomgreen;
background: green;
text-align: center;
}
.gray {
grid-area: bottomgray;
background: gray;
text-align: center;
}
@media all and (max-width: 600px) {
.container {
grid-template-areas: "topred"
"topblue"
"bottomgreen"
"bottomgray";
}
}<div class="container">
<div class="red">
Red <br /><br /> Column 2, Top
</div>
<div class="blue">
Blue <br /><br /> Column 1, Top
</div>
<div class="green">
Green <br /><br /> Column 2, Bottom
</div>
<div class="gray">
Gray <br /><br /> Column 1, Bottom
</div>
</div>