小编JPD*_*ign的帖子

我正在构建我的第一个网站，我想使用 flex 来反转列。移动两行，一行 100% 宽度的图像，另一行 100% 的文本。在桌面上的单行上，左列 50% 宽度的文本和右列 50% 宽度的图像。

我使用的这个 css 代码工作得很好，除了我想遵循移动优先样式，然后我希望媒体来自 (min-width: 600px) 而不是 (max-width: 600px)。

目前在移动设备上（小于 600 像素）列为 100%，而 600 像素以上的列为 50%。

那么如何使用 min-width 显示移动优先的代码？如前所述，我喜欢在移动设备上的列为 100%，在 600px 后反转顺序，现在桌面上的列为 50%。

如果我切换项目属性值，那么在桌面上，列是 50%，但不在同一行，一个接一个，在左侧留下 50% 的空间。所以我不知道为什么CSS规则要改变 (max-width: 600px) 到 (min-width: 600px) ？

.parent {
  display: flex;
  font-family: arial, sans-serif;
 }

.item {
  width: 50%;
  padding: 2em;
  color: #ffffff;
  background: #eeeeee;
  min-height: 500px;
}

.last {
  color: #222;
  background: #ccc;
}

@media screen and (max-width: 600px){

 .parent {
    flex-direction: column-reverse; …