@media query not being recognised

Question

I am new to bootstrap (v3.3.7) and trying to make changes to a 320 x 480 view, which I understand would use the col-xs-. setting. I know these are hardcoded into BS3 but for the life of me, cannot override the small settings. All I am trying to do is change the font color. Should be easy right?

I have tried various combinations of @media queries but nothing works. All other resolutions work fine. I have posted my code and would grateful if someone could give me a pointer. Many thanks.

HTML CODE

<footer id="footer">
    <div class="thumbnail">
      <div id="sub-header">
        <div class="container">
          <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-6">
              <p>col 1</p>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
              <p>col 2</p>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
              <p>col 3</p>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-6">
              <p>col 4</p>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        <p>©2017 Somesite.net</p>
      </div>
    </div>
  </footer>

CSS CODE

.copyright  p {
    text-align: center;
    color:yellow;   
}

@media(min-width:767px) and (max-width:990px) { **<--- This one not working**
  .copyright p {
    color: grey;
  }
}

@media(min-width:768px) and (max-width:991px) { 
  /* Styles */
  .pricingTable>.pricingTable-header:after {
    border-left: 215px solid transparent;
  }
  .copyright p {
    text-align: center;
    color: blue;
  }
}
@media(min-width:992px) and (max-width:1199px) {
  .copyright p {
    text-align: center;
    color: green;
  }
}
@media(min-width:1200px) {
  .copyright p {
    text-align: center;
    color: yellow;
  }
}

EDIT: Perhaps this code is causing problem.

    /*** CODE FOR PRICING TAGS ***/

    .pricingTable {
      text-align: left;
      background-color: #ffe400 !important;
      padding-top: 5px;
      transition: all 0.5s ease-in-out 0s;
      border: 3px solid white;
      border-radius: 5px;
    }
    .pricingTable>.pricingTable-header {
      color: #000 !important;
      height: 75px;
      position: relative;
      transition: all 0.5s ease 0s;
    }
    .pricingTable>.pricingTable-header:after {
      content: "";
      /*border-bottom: 40px solid #727cb6;*/
      /*border-left: 263px solid transparent;*/
      position: absolute;
      right: 0px;
      bottom: 0px;
    }
    .pricingTable:hover .pricingTable-header {
      /*height: 230px;*/
      /*transition: all 0.5s ease 0s;*/
    }
    .pricingTable-header>.heading {
      display: block;
      padding: 0;
    }
    h3 .heading {
      margin-left: 25px;
    }
    .price-value {
      margin-left: 25px;
    }
    .heading>h3 {
      margin: 0;
      text-transform: uppercase;
      margin-left: 25px;
    }
    .pricingTable-header>.price-value {
      display: block;
      font-size: 60px;
      line-height: 60px;
    }
    .pricingTable-header>.price-value>.mo {
      font-size: 14px;
      display: block;
      line-height: 0px;
      text-transform: uppercase;
    }
    .pricingTable-header>.price-value>.currency {
      font-size: 24px;
      margin-right: 4px;
      position: relative;
      bottom: 30px;
    }
    .pricingTable>.pricingContent {
      text-transform: uppercase;
      color: #000
    }
    .pricingTable>.pricingContent>ul {
      list-style: none;
      padding-left: 22px;
    }
    .pricingTable>.pricingContent>ul>li {
      padding: 0;
      border-bottom: 0;
    }
    .pricingTable>.pricingContent>ul>li:last-child {
      border: 0px none;
    }
    .pricingTable-sign-up {
      padding: 10px 0;
    }
    .pricingTable-sign-up>.btn-block {
      width: 100%;
      margin: 0 auto;
      background: #000;
      /*border: 2px solid #fff;*/
      color: #fff;
      padding: 15px 12px;
      text-transform: uppercase;
      font-size: 14px;
    }

@media screen and (max-width: 1200px){
    .pricingTable > .pricingTable-header:after{
        border-left: 215px solid transparent;
    }
}
@media screen and (max-width: 990px){
    .pricingTable{
        margin-bottom: 20px;
    }
    .pricingTable > .pricingTable-header:after{
        border-left: 349px solid transparent;
    }
}
@media screen and (max-width: 480px){
    .pricingTable{
        overflow: hidden;

Answer 1

You're overwriting your "faulty" media-query. This is working as intended.

copyright p {
        color: yellow;
    }
    
    @media (max-width:767px) {
        .copyright p {
            color: grey;
        }
    }
    
    @media(min-width:768px) and (max-width:991px) {
        /* Styles */
        .pricingTable>.pricingTable-header:after {
            border-left: 215px solid transparent;
        }
        .copyright p {
            text-align: center;
            color: blue;
        }
    }
    
    @media(min-width:992px) and (max-width:1199px) {
        .copyright p {
            text-align: center;
            color: green;
        }
    }
    
    @media(min-width:1200px) {
        .copyright p {
            text-align: center;
            color: yellow;
        }
    }

<body>
    <div class="copyright">
        <p>©2017 Somesite.net</p>
    </div>
</body>

---

Further explaining on media-queries:

If you want some styling to happen above Xpx width:

@media (min-width: Xpx){}

If you want to use some styling below Xpx width:

@media (max-width: Xpx){}

If you want to use some styling between Xpx and Ypx width:

@media (min-width: Xpx) and (max-width: Ypx){}