CSS not responsive to certain range

newbie here, but I actually did go through many forums here but can't seems to find the solution.

I'm trying to make three and responsive to 3 different dimensions of screens. The smaller one**(col-md)** and the bigger one**(col-lg)** works but not the middle one (col-md)

I don't know what I missed out but the middle one not working, please let me know if there's any solution to it.. In html file,

<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>

In CSS file,

@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;
  } 
}