Warum funktioniert meine Medienabfrage nicht?

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>

Problem: Die Ausgabe enthält nur das Wort "SMALL", egal wie groß der Bildschirm ist.

Ich fühle mich, als ob ich etwas offensichtlich vermisse, aber für das Leben von mir kann ich nicht herausfinden, was es ist.

Answer 1

Sie // für Kommentare in CSS nicht .. verwenden

Verwenden /*..*/

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-Compiler das verwendet ACE-Editor hob es auf ..