Twitter bootstrap responsive layout

Question

I made this responsive layout. It works fine until the width of the screen is less then 800px, it gets messed up.

How can I fix this so the logo's just 'shrink' and don't re-arrange themself underneath each other?

http://jsfiddle.net/hashie5/Pnc3g/

html:

<div class="container">
<div class="testimonials row-fluid">
    <div class="span6">
        <div class="row-fluid">
            <div class="span12"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
            <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
        </div>
        <div class="row-fluid">
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
        </div>
        <div class="row-fluid">
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
        </div>
    </div>
    <div class="span6">
        <div class="quote">
            <div class="text">
                <em>Congratulations! It is really a great tool, it is very friendly for us. Creating a new message is so easy with your smart builder. Thank you for that. 10/10</em>
            </div>
            <div class="author">JUAN ISAAC RODRIGUEZ, Credit Report, Peru.</div>
        </div>
    </div>
</div>

css:

.testimonials {
    background-color:#f7f7f7;
}
.quote {
    background: url("http://www.flexmail.net/images/quote_home.gif") left top no-repeat;
    height: 128px;
    margin: 20px auto 0 auto;
    padding: 20px;
}
.quote .text {
    color: #444444;
    line-height: 22px;
}
.quote .author {
    color: #666666;
    float: left;
    font-family:'colaboratelightregular';
    font-size: 12px;
    line-height: 22px;
    margin: 10px 0 0;
}

Answer 1

Every spanX will become a row with the width of 100% in narrower windows. That's whats causing your mess :)

Maybe this is an alternative solution, but not the best since we have duplicate the images in the html-code.

I've added some css

.visible-phone img {
    float: left;
    width: 25%;
}

And some html

<div class="row-fluid visible-phone">
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
</div>

All the images appear two times in the html. Notice the classes visible-phone and hidden-phone on the div s wrapping the images.

http://jsfiddle.net/Pnc3g/5/