Css 将页面从桌面加载到移动响应布局时更改列的顺序

在下面给定的布局中， 当页面宽度低于600px时，我想将第2列置于第1列 我尝试使用

display:flex；弯曲方向：柱反向但它没有反转列的顺序，而是反转列的内容顺序

这是一个片段



* {
框大小：边框框；
}
/*创建两个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：50%；
填充：10px；
高度：300px；/*应移除。仅用于演示*/
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*响应式布局-使两列堆叠在彼此的顶部，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
.栏目{
宽度：100%；
/**取消下面的注释将导致列的内容被反转，而不是列的顺序被反转**/
/*显示器：flex；
弯曲方向：柱反向*/
}
}
响应式双栏布局
调整浏览器窗口的大小以查看响应效果（当屏幕宽度小于600px时，列将堆叠在彼此的顶部，而不是浮动在彼此的旁边）

第1栏
一些文字

第1.2栏
一些文字

第1.3栏
一些文字

第2栏
一些文字

您尝试向列中添加
display:flex
，这使列成为
flex容器
，其中的元素成为他的
flex项
。这就是为什么要反转列中的内容，而不是列本身。您希望改为控制行内的列。为此，您需要将该行设置为
flex容器
（将
display:flex
应用于该行而不是列）。以下是适用于您的案例的有效CSS：

.row {
  display: flex;  // makes the row a flex container
}

@media screen and (max-width: 600px) {
  .row {
    flex-direction: column-reverse;
  }
}

.column {
  flex-grow: 1;  // makes all columns fill the width of the row equally
  padding: 0 10px;
}

以下是基于@ajobi的公认答案的正确实现和工作示例：



* {
框大小：边框框；
}
/*创建两个相邻浮动的相等列*/
.栏目{
浮动：左；
宽度：50%；
填充：10px；
高度：300px；/*应移除。仅用于演示*/
}
.行{
display:flex；//使行成为flex容器
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*响应式布局-使两列堆叠在彼此的顶部，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：600px）{
.行{
弯曲方向：柱反向；
}
.栏目{
宽度：100%；
/**取消下面的注释将导致列的内容被反转，而不是列的顺序被反转**/
/*显示器：flex；
弯曲方向：柱反向*/
}
}
响应式双栏布局
调整浏览器窗口的大小以查看响应效果（当屏幕宽度小于600px时，列将堆叠在彼此的顶部，而不是浮动在彼此的旁边）

第1栏
一些文字

第1.2栏
一些文字

第1.3栏
一些文字

第2栏
一些文字

快乐编码！此外，一般情况下，您可能会避免
浮动
，并在可能的情况下使用
flexbox
。在大多数情况下，您可以以不太复杂的方式实现相同的目标；-）