Question

I have a problem with the Grid System of Bootstrap 2.

I want to make a header with some text, and an image on the right of it.
Therefore I made a row, and put a span8 and a span4 inside of it.

However, when the window gets too small for the content to be displayed side by side, I want the span4 div to come before the span8 div.

<div class="hero-unit">
    <div class="container">
        <div class="row">
            <div class="span8">
                This is some text
            </div>
            <div class="span4">
                <img src="image.png" alt="" />
            </div>
        </div>
    </div>
</div>

---

How can I do this?
So in other words, how can I change the order of the divs.

If I’m not completely mistaking, there is no such thing described in the documentation.

Answer 1

You can do it with media queries and floats.

Should look somewhat like this:

<div class="span4 pull-right"><!-- Image here --></div>
<div class="span8"><!-- Text here --></div>

Now you should use a media query (as seen in the responsive.less file) to switch when the screen size jumps below a specific mark. Then you make sure that the span4‘s float is removed. You might need to use .row-fluid instead of the usual .row and use your own padding to make it look great.