Css media Queries does not work and is conflicting

I am developing the responsive one page and diz documentation to do the media queries as follows: 

@media(max-width:767px){}
@media(min-width:768px){}
@media(max-width:992px){}

I Use Bootstrap 3.

So follow my CSS code: 

@media (max-width:767px) {
    /* de 0px até 767px */
}
@media (min-width:768px) and (max-width: 992px) {
    /* de 768px até 992px*/

}
@media (min-width:992px) and (max-width: 1200px){
    /* acima de 992px */
    .infos-schedule{
        font-size: 15px;
    }

    .title-infos{
        font-size: 15px;
    }
}

.infos-schedule{
    font-family: "Montserrat";
    font-size: 17px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.23;
    letter-spacing: 1.8px;
    text-align: left;
    color: #0a1414;
    margin-bottom: 0px !important;
}

.title-infos{
    color: #037C74;
    margin-right: 5px;
    font-size: 20px;
}


.create-in-schedule{
    font-family: Montserrat;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.22;
    letter-spacing: 1.8px;
    text-align: right;
    color: #707070;
    display: block;
}
.title-header{
    margin-bottom: 10px;
    padding: 0px;
    display: flex;
    align-items: center;
}


.title{
    font-family: "Montserrat";
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.24;
    letter-spacing: 2.1px;
    color: #0a1414;
    font-size: 21px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.card-schedules {
    margin: 10px 5px;
    background-color: #ecf3f8;
    height: 150px;
}

HTML: 

<mat-card class="card-schedules" 
                        *ngIf="pendente.status == 'Pendente'" >

                  <mat-card-content>
                    <div class="col-lg-12 col-md-12 col-sm-12 title-header">
                      <div class="col-lg-10 col-md-10 col-sm-12 infos-schedule padding0"><b class="title-infos">Anúncio: </b>{{ pendente.Anuncio }}</div>
                      <div class="col-lg-2 col-md-2 create-in-schedule padding0">{{ pendente.created_in | date:'MM/dd/yyyy'}}</div>
                    </div>
                  </mat-card-content>
</mat-card>

The problem is that the media query of 992px is not being obeyed in the classes already produced and the CSS of the larger media query predominates.

Follows what the Browser is doing showing:

insert the description of the image here

What's going on?

Author: hugocsl, 2019-01-18
Source

2 answers

Do this: 

@media (max-width:767px) {
    /* de 0px até 767px */
}
@media (min-width:768px) and (max-width: 992px) {
    /* de 768px até 992px*/
}
@media (min-width:992px) {
    /* acima de 992px */
    /* ... */
}

Remembering that your HTML needs the viewport . I usually use in this setting: 

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=10, minimum-scale=1.0">

@edit:

About the image posted in the issue of the question, consider this comment of mine in @hugocsl's answer:

You can put everything with max-width or min-width too, but it will "keep" (inherit) the properties if they are not overwritten...

As the nomenclature itself says, CSS stylizes cascading. If you need to overwrite an attribute, add the keyword !important next to the value: 

font-size: 15px !important;

Recommended Reading: SOpt - what is the statement"!important"?

@edit2:

As @hugocsl "reminded us", since it went unnoticed, you should declare the media queries after the elements in question.

"- all @media rules should be the last things. Type first vc writes all your CSS, all classes etc, there at the end of everything you start to write the media queries and puts the @ madia you need, they should come after all" – hugocsl

CSS stylizes cascading, as the name itself says (Cascading Style sheet ). So your code should look like this: 

.infos-schedule {
    font-family: "Montserrat";
    font-size: 17px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.23;
    letter-spacing: 1.8px;
    text-align: left;
    color: #0a1414;
    margin-bottom: 0px !important;
}

.title-infos {
    color: #037C74;
    margin-right: 5px;
    font-size: 20px;
}

/* ... */

@media (min-width:992px) and (max-width: 1200px){
    .infos-schedule{
        font-size: 15px;
    }

    .title-infos{
        font-size: 15px;
    }
}

In such a way that everything that is declared within @media overwrites what is declared before it.

 6
Author: LipESprY, 2019-01-18 14:08:34

Guy your problem is that min-width overwrites max-width

See here how your CSS 

@media(min-width:768px){} /* aqui está "errado" */
@media(max-width:992px){...

Everything within that @media(min-width:768px){} will overwrite what is in @media(max-width:992px){}, because the rules of max-992 will be "overridden" if they are also in min-768

See what the Mozilla documentation says: https://developer.mozilla.org/es/docs/Web/CSS/max-width

max-width overrides width, but min-width overrides max-width.

One solution is do as @LipESprY said in his answer. Or else you put both with min-width 

@media(min-width:768px){} 
@media(min-width:992px){...

This answer has other details that will help you a lot to understand this concept of min and max and the @media because it works and because the Times of the problem:
Media Queries does not work informed measures

 5
Author: hugocsl, 2019-01-18 13:15:57