I've customized the Twitter Bootstrap layout for my website, and everything is looking great except for the @media queries. Can anyone help me figure out what's going wrong?
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%;
}
}
The idea is that the .hideable column should disappear and the .expandable one will take its place. If you check out the development site at , when you resize the window, you'll notice that the middle photos in the "Lessons" section don't disappear.