2

I have a page using 4 columns created with col-sm-3 in Bootstrap 3. I would like to re-order the columns when the display goes to xs, as follows.

sm:

Col-1 Col-2 Col-3 Col-4

xs:

Col-1 Col-3 Col-2 Col-4

I have tried using col-xs-push-6 and col-xs-pull-6 on columns 2 & 3 but that seems to movew the columns at the larger display sizes.

Any help is appreciated, my code snippet follows:

<div class="row">
    <div class="col-sm-12">
        <h4>Individual Numbers</h4>
        <div class="col-sm-3 col-xs-6">
            Column 1
        </div><!-- end .col-md-3 -->    
        <div class="col-sm-3 col-xs-6">  //Tried col-xs-pull-6 after col-xs-6
            Column 2
        </div><!-- end .col-md-3 -->
        <div class="col-sm-3 col-xs-6">  //tried col-xs-push-6 after col-xs-6
                Column 3
        </div><!-- end .col-md-3 -->
        <div class="col-sm-3 col-xs-6">
            Column 4
        </div><!-- end .col-md-3 -->
    </div><!-- end .row -->
</div><!-- end .row -->
Francisco Puga
  • 23,869
  • 5
  • 48
  • 64
user3742752
  • 21
  • 1

1 Answers1

1

push and pull are applied when the viewport is equal or larger that your specified viewport. So in these cases you must write your html in the desired order for the lower viewport and use pull/push to set the order for the bigger displays. See this answer for a more detailed explanation.

<div class="row">
    <div class="col-sm-12">
        <h4>Individual Numbers</h4>
        <div class="col-sm-3 col-xs-3">
            Column 1
        </div><!-- end .col-md-3 -->    
        <div class="col-sm-3 col-xs-3 col-sm-push-3">
            Column 3
        </div><!-- end .col-md-3 -->
        <div class="col-sm-3 col-xs-3 col-sm-pull-3">
            Column 2
        </div><!-- end .col-md-3 -->
        <div class="col-sm-3 col-xs-3">
            Column 4
        </div><!-- end .col-md-3 -->
    </div><!-- end .row -->
</div><!-- end .row -->
Community
  • 1
  • 1
Francisco Puga
  • 23,869
  • 5
  • 48
  • 64