Невозможно получить пользовательские медиа-запросы для работы с темой bootstrap

Question

Я использую тематическую версию шаблона Bootstrap Twitter для создания сайта, и весь мой собственный CSS работает отлично, за исключением запросов @media , Может ли кто-нибудь увидеть, что я делаю неправильно?

HTML:

<section id="lessons" class="bg-black no-padding lesson-content"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-4"> 
     <img src="/clients/wt/images/lesson_01.jpg" alt="Image 1" /> 
     <img src="/clients/wt/images/lesson_03.jpg" alt="Image 3" /> 
     </div> 
     <div class="col-lg-4 hideable"> 
     <img src="/clients/wt/images/lesson_02.jpg" alt="Image 2" /> 
     <img src="/clients/wt/images/lesson_04.jpg" alt="Image 4" /> 
     </div> 
     <div class="col-lg-4 text-right expandable"> 
     <h3>Content Title</h3> 
     <p>More content here</p> 
     </div> 
    </div> 
    </div> 
</section> 

CSS:

@media screen and (max-width: 900px) { 
    .hideable { 
    display: none; 
    } 
    .expandable { 
    width: 66.6666667%; 
    } 
} 

Цель здесь состоит в том, что .hideable колонка исчезнет и .expandable один заполнит свое место. Если вы хотите увидеть полный сайт разработки, он доступен по адресу http://tentenstudios.com/clients/wt/. Если вы измените размер окна, вы увидите, что средние фотографии в области «Уроки» не исчезают.

Answer 1

бутстрапом CSS содержит:

@media (min-width: 1200px) 
.col-lg-4 { 
    width: 33.33333333%; 
} 

и

@media (min-width: 1200px) 
.col-lg-1, .col-lg-10, .col-lg-11, 
.col-lg-12, .col-lg-2, .col-lg-3, 
.col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9 { 
    float: left; 
} 

Чтобы добиться того, что я думаю, что вы ищете вы должны поддерживать оба эти стили за пределами мин-ширина 1200px. Так что-то вроде этого должно работать:

@media screen and (max-width: 1200px) { 
    .col-lg-4 { 
    width: 33.33333333%; 
    float: left; 
    } 
    .hideable { 
    display: none; 
    } 
    .expandable { 
    width: 66.6666667%; 
    } 
}