CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
trs
trs

Reputation: 863

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.

Upvotes: 0

Views: 1500

Answers (2)

trs
trs

Reputation: 863

Using .pull and .push does the trick!

Updated Working DEMO: http://jsfiddle.net/knq9qrom/1/

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 col-sm-push-6 reverse">
            image
        </div>
        <div class="col-sm-6 text-center col-sm-pull-6 reverse">
            desctiption
        </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 col-sm-push-6 reverse">
            image
        </div>
        <div class="col-sm-6 text-center col-sm-pull-6 reverse">
            desctiption
        </div>
    </div>
</div>

Upvotes: 2

vadims
vadims

Reputation: 147

Play with hidden and visible classes to produce the desired result. Bootstrap responsive utilities

<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 hidden-xs">
    <div class="col-sm-6 text-center reverse">desctiption</div>
    <div class="col-sm-6 text-center reverse">image</div>
</div>
<div class="row visible-xs-block">
    <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">image</div>
    <div class="col-sm-6 text-center">desctiption</div>
</div>
<div class="row hidden-xs">
    <div class="col-sm-6 text-center reverse">desctiption</div>
    <div class="col-sm-6 text-center reverse">image</div>
</div>
<div class="row visible-xs-block">
    <div class="col-sm-6 text-center">image</div>
    <div class="col-sm-6 text-center">desctiption</div>
</div>

Upvotes: 0

Related Questions