почему не @медиа-элементов изменение запроса на конкретное размеров экрана?


Играя с @Media-запросы с Bootstrap 3. Следующую структуру запросов приходят несколько раз, глядя на учебники. Однако, я по-прежнему возникают вопросы.

мин-ширина: 1200px оказывает размер шрифта (92px) и фон (красный) правильно, мин-ширина: 992px оказывает размер шрифта (48px) и фона (зеленый) правильно.

Однако, когда я иду ниже, чем те две, мин-ширина: 768px и Макс-ширина: 768px по, их атрибуты не применяются к элементам. Ценим любую помощь!

    @media(max-width:767px){
      .jumbotron h1 {
        font-size: 12px;
      }
    
       body {
        background: yellow;
      }
    }
    
    @media(min-width:768px){
      .jumbotron h1 {
        font-size: 24px;
      }
    
       body {
        background: blue;
      }
    }
    
    
    @media(min-width:992px){
      .jumbotron h1 {
        font-size: 48px;
      }
    
       body {
        background: green;
      }
    }
    
    @media(min-width:1200px){
      .jumbotron h1 {
        font-size: 92px;
      }
    
      body {
        background: red;
      }
    }
<body>
  <p class="jumbotron">
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
  </p>
</body>