CSS не реагирует на определенный диапазон

Question

newb ie здесь, но я действительно сделал go на многих форумах здесь, но, похоже, не могу найти решение.

Я пытаюсь сделать три и реагирует на 3 разных размера экранов. Меньший (col-md) и больший (col-lg) работает, но не средний (col-md)

Не знаю, что я пропустил, но средний не работает, дайте мне знать, есть ли какое-нибудь решение. В файле html,

<div class="style col-lg-4 col-md-6 col-sd-12">
        <div class="boxtitle">
        Chicken
        </div>
        <div>
            <p>
            SOME TEXT HERE</p>
        </div>
    </div>

    <div class="style col-lg-4 col-md-6 col-sd-12">
        <div class="boxtitle">
        </div>
        <div>
            <p>
            SOME TEXT HERE
            </p>
        </div>
    </div>

    <div class="style col-lg-4 col-md-12 col-sd-12">

        <div class="boxtitle">
        Sushi
        </div>
        <div>
            <p>
                SOME TEXT HERE
        </p>
    </div>
<div>

в файле CSS ,

@media (max-width: 767px) {
  .col-sd-12 {
    width: 100%;
    float: left;
  }
}


@media (min-width: 768px) and (max-width: 991px) {
    .col-md-6, .col-md-12 {
    float: left;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-12 {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg-4 {
    width: 33%;
    float: left;
  } 
}

Answer 1

В вашем примере кода есть синтаксические ошибки сом: незакрытый .boxtitle во втором блоке и незакрытый последний блок .style. Если эти ошибки исправлены, код работает правильно и проблем нет

Answer 2

.style:nth-child(1) {
  background-color: #bbb;
}

.style:nth-child(2) {
  background-color: #666;
}

.style:nth-child(3) {
  background-color: #999;
}

@media (max-width: 767px) {
  .col-sd-12 {
    width: 100%;
    float: left;
  }
}


@media (min-width: 768px) and (max-width: 991px) {
    .col-md-6, .col-md-12 {
    float: left;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-12 {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg-4 {
    width: 33%;
    float: left;
  } 
}

<div class="style col-lg-4 col-md-6 col-sd-12">
   <div class="boxtitle">
      Chicken
   </div>
   <div>
      <p>
         SOME TEXT HERE
      </p>
    </div>
</div>

<div class="style col-lg-4 col-md-6 col-sd-12">
   <div class="boxtitle">
     Pizza
   </div>
   <div>
      <p>
         SOME TEXT HERE
       </p>
    </div>
</div>

<div class="style col-lg-4 col-md-12 col-sd-12">

  <div class="boxtitle">
     Sushi 
  </div>
  <div>
    <p>
       SOME TEXT HERE
    </p>
  </div>
</div>

Пожалуйста, закройте и последний <div class="style col-lg-4 col-md-12 col-sd-12">.

Самая большая ошибка в том, что вы не закрыли div class="boxtitle во втором div, который создает все проблемы

Answer 3

Вы набрали col-sd-12, я думаю, вы имели в виду col-sm-12?