Why isn't my media query working?

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: The output contains only the word "SMALL" no matter how wide the screen is.

I feel like I'm missing something obvious, but for the life of me I can't figure out what it is.

Answer 1

Don't use // for comments in CSS..

Use /*..*/

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's CSS compiler which uses ACE editor picked it up..