CODEWITHSUNDEEP
htmlcssmedia-queriesflexbox
Abhishek Rai
Abhishek Rai

Reputation: 23

I am not able to use CSS order property

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?

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>

My media query is:

@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; }
}

Upvotes: 0

Views: 189

Answers (1)

Rahul
Rahul

Reputation: 518

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.

Upvotes: 3

Related Questions