为什么我的媒体查询不起作用？

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;
    }
}

编辑

使用ACE编辑器的Codeply的CSS编译器选择了它.