Media requests for the phone do not work?

Question

css

I have a media query:

@media screen and (max-width: 768px) {
...
}
@media screen and (max-width: 1000px){
}

But when I open it from my phone ( iphone 4s ), where the screen is 640×960 as far as I know...
The media query doesn't work, or rather it works, but not the one with 768, but the one with max-width 1000px
Why is that?
Mb am I somehow not building media queries correctly?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Specified.
Here is an example:
Full version: cssdeck.com/labs/full/gs1xp8rr
Version with code: cssdeck.com/labs/gs1xp8rr
Please help, what's the problem?

Answer 1

Swap them and you'll be happy.

Answer 2

Google meta viewport