0
Я пытаюсь запустить этот код, в соответствии с которым порядок ящиков должен измениться для размера экрана более 700 пикселей. Но это не происходит как таковое, и нет видимых изменений. Что я делаю неправильно?Я не могу использовать свойство порядка 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 вы потратили несколько минут, чтобы опубликовать этот вопрос на SO, но вы не могли потратить минуту, чтобы проверить свой код? Получите ответ! – Rahul