Почему мой медиа-запрос не работает?

Question

.small_only { 
 
    display: block; 
 
} 
 

 
.large_only { 
 
    display: none; 
 
} 
 

 

 
/* === Media Queries === */ 
 

 
// Extra large devices (large desktops, 1200px and up) 
 
@media (min-width: 1200px) { 
 
    .small_only { 
 
    display: none; 
 
    } 
 
    .large_only { 
 
    display: block; 
 
    } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-12 col-xs-12"> 
 
     <div class="small_only"> 
 
     <h1>SMALL</h1> 
 
     </div> 
 
     <div class="large_only"> 
 
     <h1>This should only be visible in large windows</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Проблема: Выход содержит только слово «SMALL», независимо от того, насколько широкий экран.

Я чувствую, что у меня что-то не хватает, но для жизни я не могу понять, что это такое.

Answer 1

Не используйте // для комментариев в CSS ..

Использование /*..*/

http://www.codeply.com/go/uMSHCzymw3

.small_only { 
    display: block; 
} 
.large_only { 
    display: none; 
} 

/* === Media Queries === */ 
/* Extra large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { 
    .small_only { 
     display: none; 
    } 
    .large_only { 
     display: block; 
    } 
} 

EDIT

Codeply в CSS компилятор который использует редактор ACE, поднял его.