Question

With twitter bootstrap.css and bootstrap-responsive.css, .span* become equivalent to a .span12 under 768px.

This behaviour is perfectly fine when text is embedded, but for pictures it make sense to use a 2x2 layout between 4x1 and 1x4.

How to obtain this 2x2 layout from 767px to 320px?

768px wide (4×1)

767px wide (1×4)

HTML:

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail" href="#">
                <img alt="" src="http://placehold.it/200x150">
                <p>1</p>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail" href="#">
                <img alt="" src="http://placehold.it/200x150">
                <p>2</p>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail" href="#">
                <img alt="" src="http://placehold.it/200x150">
                <p>3</p>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail" href="#">
                <img alt="" src="http://placehold.it/200x150">
                <p>4</p>
            </div>
        </li>
    </ul>
</div>

http://jsfiddle.net/baptme/jWcdS/

---

Notes: This question is inspired by the request asked in a comment on this answer

Answer 1

CSS:

@media (min-width: 320px) and (max-width: 767px) {
    .row-fluid .thumbnails .span3 {
        width:48.6188%;
        margin-left: 2.76243%;        
        float:left;
    }
    .row-fluid .thumbnails .span3:nth-child(2n+1) {
        margin-left: 0;
    }
}

http://jsfiddle.net/baptme/jWcdS/1/

500px wide (2×2)

319px wide (1×4)

Explanations:

Media queries can be used to override twitter bootstrap between 320px and 767px by using @media (min-width: 320px) and (max-width: 767px)

.row-fluid .thumbnails .span3 has been used over a .span3{ ... } or .row-fluid .span3{ ... } for the following reasons:

• 3 classes make enough priority to override .row-fluid .span3 from bootstrap.css
• adding .thumbnails between .row-fluid and .span3 will not affect the other .row-fluid .span3 used for the layout.

The width:48.6188%; and margin-left: 2.76243%; correspond the the value given to a .row-fluid .span6

The float:left; overrides the float:none

The pseudo class nth-child(2n+1) has been used with margin-left: 0; to remove the left margin on the .row-fluid .thumbnails .span3 ending up on the left side of the page (1 and 3).