メディアクエリが機能しないのはなぜですか？

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

使用/*..*/

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コンパイラ.. CSSでのコメントを//を使用しないでくださいACEエディタを使用してそれをピックアップ..