CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Tommy D
Tommy D

Reputation: 418

Bootstrap 3 column ordering on collapse

I have these two columns inside a row:

                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-4">
                         <p>Column A</p>
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-8">
                        <p>Column B</p>
                        <div style="padding:10px;" class="text-center">
                            <a href="#" class="btn btn-dark pulse2"></a>
                        </div>
                    </div>
                </div>

So that whe the screen size turns to xs they collapse in this order:

Column A

Column B

But how can I make them collapse the other way 'round? From other questions I red I tried to add the class col-sm-pull-8 to the A column and col-sm-push-4 to the B Column.

But it doesn't work, it just mess up the layout and they still collapse like:

Column A

Column B

Upvotes: 0

Views: 1424

Answers (1)

Rence
Rence

Reputation: 2950

col-sm-pull-8 and col-sm-push-4 work fine, you just need to swap your order:

<div class="row">
    <div class="col-lg-8 col-md-8 col-sm-8 col-sm-push-8">
        <p>Column B</p>
        <div style="padding:10px;" class="text-center">
            <a href="#" class="btn btn-dark pulse2"></a>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-sm-pull-4">
        <p>Column A</p>
    </div>
</div>

http://jsfiddle.net/yutngfjw/

Upvotes: 1

Related Questions