Overwriting media queries - min and max width

问题

I have this code in my first CSS file:

/* min-width */
@media (min-width: 768px) {
  .navbar-static-top {
    border-radius: 0;
  }
}

/* max-width */
@media (max-width: 767px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
  .navbar-form .form-group:last-child {
    margin-bottom: 0;
  }
}

I have this code in a CSS file linked after the first file:

/* min-width */ 
@media (min-width: 992px) {
  .navbar-static-top {
    border-radius: 0;
  }
}

/* max-width */
@media (max-width: 991px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
  .navbar-form .form-group:last-child {
    margin-bottom: 0;
  }
}

As you can see, the only difference between the two files is the min-width and max-width values.

I need the code in the second file to overwrite the first file. It needs to be as if the code in the first file doesn't exist. I do not have access to the first file, it's being pulled from a CDN. See this question: Modifying Bootstrap breakpoints after loading from a CDN. I customised bootstrap by changing the LESS variable @grid-float-breakpoint from @screen-sm-min to @screen-md-min to prevent the navbar from spilling over onto two lines. I diffed the customised and original compiled versions and the only difference was the values of the min-width and max-width of the media queries. The actual content of the media queries stays the same in both versions.

来源：https://stackoverflow.com/questions/42755990/overwriting-media-queries-min-and-max-width