我无法使用CSS订单属性

Question

我正在尝试运行此代码，根据该代码，对于大于700px的屏幕大小，框的顺序应该更改。 但事实并非如此，并且没有明显的变化。 我做错了什么？

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

$entityCrmFormResponse->getCompany()

.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>

Answer 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.