Почему не срабатывает media для блоков?

Если ширина меньше 320, то она и меньше 1000. А из css-правил выбирается последнее. Поэтому надо просто переставить все блоки в обратном порядке:

body { 
    font-family: Arial, sans-serif; 
    font-size: 12pt; 
} 
 
@media screen and (max-width: 1000px) { 
    .b320 { display: none; } 
    .b480 { display: none; } 
    .b640 { display: none; } 
    .b768 { display: none; } 
    .b1000 { display: block; } 
} 
 
@media screen and (max-width: 768px) { 
    .b320 { display: none; } 
    .b480 { display: none; } 
    .b640 { display: none; } 
    .b768 { display: block; } 
    .b1000 { display: none; } 
} 
 
@media screen and (max-width: 640px) { 
    .b320 { display: none; } 
    .b480 { display: none; } 
    .b640 { display: block; } 
    .b768 { display: none; } 
    .b1000 { display: none; } 
} 
 
@media screen and (max-width: 480px) { 
    .b320 { display: none; } 
    .b480 { display: block; } 
    .b640 { display: none; } 
    .b768 { display: none; } 
    .b1000 { display: none; } 
} 
 
@media screen and (max-width: 320px) { 
    .b320 { display: block; } 
    .b480 { display: none; } 
    .b640 { display: none; } 
    .b768 { display: none; } 
    .b1000 { display: none; } 
}

<div class="b320">media: <b>max-width: 320px</b></div> 
<div class="b480">media: <b>max-width: 480px</b></div> 
<div class="b640">media: <b>max-width: 640px</b></div> 
<div class="b768">media: <b>max-width: 768px</b></div> 
<div class="b1000">media: <b>max-width: 1000px</b></div>

Вот так будет работать:

body { font-family: Arial, sans-serif; font-size: 12pt; }

@media screen and (max-width: 320px) {
    .b320 { display: block; }
    .b480 { display: none; }
    .b640 { display: none; }
    .b768 { display: none; }
    .b1000 { display: none; }
}
@media screen and (max-width: 480px) and (min-width: 320px){
    .b320 { display: none; }
    .b480 { display: block; }
    .b640 { display: none; }
    .b768 { display: none; }
    .b1000 { display: none; }
}
@media screen and (max-width: 640px) and (min-width: 480px) {
    .b320 { display: none; }
    .b480 { display: none; }
    .b640 { display: block; }
    .b768 { display: none; }
    .b1000 { display: none; }
}
@media screen and (max-width: 768px) and (min-width: 640px){
    .b320 { display: none; }
    .b480 { display: none; }
    .b640 { display: none; }
    .b768 { display: block; }
    .b1000 { display: none; }
}
@media screen and (max-width: 1000px) and (min-width: 768px) {
    .b320 { display: none; }
    .b480 { display: none; }
    .b640 { display: none; }
    .b768 { display: none; }
    .b1000 { display: block; }
}

jsFiddle, у вас при маленьких разрешениях срабатывают сразу несколько медиазапросов.