CODEWITHSUNDEEP
csstwitter-bootstrap-3
nicknack123123
nicknack123123

Reputation: 115

How to switch column position with bootstrap (desktop / smartphone)?

How can I do the following? Push / Pull?

Desktop:

Desktop

Smartphone:

Smartphone

I started with this.

<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
        Some Small Object
</div>
<div class="col-md-6 col-sm-12 col-xs-12 text-center">
        Some Larger Object
</div>
<div class="col-md-3 col-sm-6 col-xs-6 text-center">
        Some Small Object
</div></div>

Solution (03-21-2016):

<div class="row">
<div class="col-xs-6 col-md-3 text-center">
  A
</div>
<div class="col-xs-6 col-sx-push-0 col-md-3 col-md-push-6 text-center">
  C
</div>
<div class="col-xs-12 col-sx-pull-0 col-md-6 col-md-pull-3 text-center">
  B
</div></div>

Upvotes: 1

Views: 3925

Answers (1)

MrHaze
MrHaze

Reputation: 3996

Have a look at Grid column reordering in the Bootstrap docs.

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

Here's a good example on how to use column reordering.

Upvotes: 1

Related Questions