0
このコードを実行すると、700pxより大きい画面サイズのボックスの順序を変更する必要があります。 しかし、そのようなことは起こらず、目に見える変化はありません。 私は間違っているとは何ですか？私はCSSの注文プロパティを使用することができません
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; }
}
あなたのメディアクエリのタイプミスを持っている：それは、 "画面" ではなく、 "sceen" です。 – Pie
デバッグのヘルプ（「なぜこのコードは動作しませんか？」）には、目的の動作、特定の問題またはエラー、および問題そのもの**を再現するのに必要な最短コードが含まれている必要があります。 - ほとんどのコードはJSBinでのみ利用できます。 – Quentin
@Abhishekあなたはこの質問を投稿するのに数分を費やしましたが、あなたのコードをチェックするのに時間がかかりませんでしたか？レクト獲得！ – Rahul