我不能使用CSS顺序属性。

I am trying to run this code according to which the order of the boxes should change for screen size larger than 700px. But it does not happen as such, and there is no visible change. What is it that I am doing wrong?

我正在尝试运行这段代码，根据这个代码，框的顺序应该更改为大于700px的屏幕大小。但这并没有发生，而且也没有明显的变化。我做错了什么?

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

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

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

更多相关文章

随机推荐