How to reverse order of cols in responsive Bootstrap 3?

DEMO: http://jsfiddle.net/su0ae5v9/

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-6 text-center">
            image
        </div>
        <div class="col-sm-6 text-center">
            desctiption
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center reverse">
            desctiption
        </div>
        <div class="col-sm-6 text-center reverse">
            image
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center">
            image
        </div>
        <div class="col-sm-6 text-center">
            desctiption
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center reverse">
            desctiption
        </div>
        <div class="col-sm-6 text-center reverse">
            image
        </div>
    </div>
</div>

CSS:

.container {
    background: beige;
}
.reverse {
    background: salmon;
}

I have alternate rows where the image is on the left and description to the right, then reversed on the next row. You might have to expand the jsfiddle preview to see it.

When responsive (narrow), I want the image to always be on top and description at the bottom, so that the order is

image

description

image

description

CSS only would be ideal, I already have a jQuery solution but needs to work on wondow.resize and it’s nasty.


Source: css3

Leave a Reply