bootstrap row-fluid and image grid

http://stackoverflow.com/questions/13981384/bootstrap-row-fluid-and-image-grid

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<span id="output"></span>
<div class="row-fluid">
    <section class="span8 content">
        <div class="row-fluid">
            <div class="span3">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ" />
            </div>
            <div class="span3">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ" />
            </div>
            <div class="span3">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ" />
            </div>
            <div class="span3">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ" />
            </div>
        </div>
        <div class="row-fluid">
            <div class="span8">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ" />
            </div>
            <div class="span4">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSlkfizo8Zj0MGNAt2p9g4JFnjOT4017-sR0Cjodujh5Yqb8JJ" />
            </div>
        </div>
    </section>

    <aside class="span4"></aside>
</div>

CSS

aside {
    background: gray;
    height: 300px;
}
@media all and (min-width: 768px) and (max-width: 979px) {
    .row-fluid aside.span4 {
        margin: 0;
        clear: both;
        float: none;
        background: red;
    }
    .content {
        width: 100% !important;
    }
}