我无法使用 CSS order 属性答案

【问题标题】：I am not able to use CSS order property我无法使用 CSS order 属性
【发布时间】：2017-05-21 02:59:38
【问题描述】：

我正在尝试运行此代码，对于大于 700 像素的屏幕尺寸，框的顺序应根据该顺序进行更改。但这并没有发生，也没有明显的变化。我到底做错了什么？

http://jsbin.com/xabegeziro/edit?html,css,output

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.header {
  background-color: green;
  min-height: 100px;
  width: 100%
}
.blue-box {
  background-color: blue;
  min-height: 100px;
  width: 100%
}
.red-box {
  background-color: red;
  min-height: 100px;
  width: 100%
}
.dark-green-box {
  background-color: green;
  min-height: 100px;
  width: 250px;
}
.purple-box {
  background-color: purple;
  min-height: 100px;
  width: 250px;
}
.orange-box {
  background-color: orange;
  min-height: 100px;
  width: 100%
}
.light-blue-box {
  background-color: #00d0ff;
  min-height: 100px;
  width: 100%
}
@media sceen and (min-width: 700px) {
  .header {
    order: 1;
  }
  .orange-box {
    order: 2;
  }
  .purple-box {
    order: 3;
  }
  .red-box {
    order: 4;
  }
  .dark-green-box {
    order: 5;
  }
  .light-blue-box {
    order: 6;
  }
  .blue-box {
    order: 7;
  }
}

<div class="container">
  <div class="header"></div>
  <div class="blue-box"></div>
  <div class="red-box"></div>
  <div class="orange-box"></div>
  <div class="purple-box"></div>
  <div class="dark-green-box"></div>
  <div class="light-blue-box"></div>
</div>

我的媒体查询是：

@media screen and (min-width: 700px){
  .header { order: 1; }
  .orange-box { order: 2; }
  .purple-box { order: 3; }
  .red-box { order: 4; }
  .dark-green-box{ order: 5; }
  .light-blue-box{ order: 6; }
  .blue-box{ order: 7; }
}

【问题讨论】：

您的媒体查询中有错字：它是“屏幕”，而不是“屏幕”。
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现 它所需的最短代码。 — 您的大部分代码仅在 JSBin 上可用。
@Abhishek 您浪费了几分钟在 SO 上发布此问题，但您不能花一分钟时间检查您的代码？得到 Rekt！

标签： html css media-queries flexbox

【解决方案1】：

1.Ensure you have added viewport metatag in your page:
  <meta name="viewport" content="width=device-width, initial-scale=1">

2.And There's a typo in your media query.
  Replace sceen with screen.

【讨论】：