Using Twitter bootstrap - can I change the ordering of rows and columns?

Question

I have two rows with three columns in each. The first row contains images, the second row contains areas with text. In a desktop browser - where the three columns are aligned horizontally - each image is aligned on top of the corresponding text area. But on a mobile device, of course, all columns are stacked below each other. This makes all the images in row one get displayed below each other. And then the text areas follow in the same manner.

Is there a css-way to re-arrange my columns? I would like to stack the image and its corresponding text area together like this:

image1
textArea1
image2
textArea2
image3
textArea3

I have a jsfiddle set up.

<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">
<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">

No images but you get the general idea.

Answer 1

I assume you are using bootstrap 3.0.

This is a very common layout situation. You have a couple of options.

You can use the inbuilt bootstrap column reordering with offset, if you place all of your columns in the same container and handle them accordingly on the various views. However this has to do mostly with rearranging the order that contents are displayed and not optimal for this particular case but have a look on how this work as it will come in handy in various scenarios in the future.

Bootstrap 3.0 offsets

But the most proper solution in your case and the one I use extensively in cases like this, is to put the image and text on the same columns like so:

<div class="row">
    <div class="col-md-3">
        <img class="img-responsive" src="..."/>
        <p>...image text here...</p>
    </div>
    <div class="col-md-3">
        <img class="img-responsive" src="..."/>
        <p>...image text here...</p>
    </div>
    <div class="col-md-3">
        <img class="img-responsive" src="..."/>
        <p>...image text here...</p>
    </div>
</div>

This way you have a column that displays correctly on all views.

Remember that bootstrap 3 is mobile first and developing should start ideally, from the smallest view to the largest. Always try to keep relevant dom elements together so that they have the desirable behavior on different sized layouts.

You just need to make sure that your image is equal or bigger than your larger column space width and that you use the img-responsive class on the image, for it to scale properly.

There are also other ways to achieve this but they defeat the purpose of using bootstrap for responsive layout and will more complicated for no good reason and similar result.

Try to keep markup as simple and elegant as possible in bootstrap for better maintenance, or things can easily get lost in a code soup of classes.