Bootstrap 3 switch columns on tablet and mobile

HTML & CSS
1

Hi there,

I am using Bootstrap 3 and have 2 columns - one on the left which is smaller than the one on the right.

What I would like to do is switch the order of them when viewing on a tablet and mobile, but can’t work it out.

I am trying to use the push and pull classes but not having any luck.

This is what I currently have:

 <div class="container">
    <div class="row">

      <div class="col-md-4">
      LEFT
      </div>

      <div class="col-md-8 page-content about-us">
      RIGHT
      </div>
    </div>
  </div>

I have tried this which isn’t working:

<div class="container">
    <div class="row">

      <div class="col-md-4 col-sm-push-4">
      LEFT
      </div>

      <div class="col-md-8 col-sm-pull-8 page-content about-us">
      RIGHT
      </div>
    </div>
  </div>

Can anyone help with the push/pull classed?

Thanks

2

Wouldn’t it be push-8 and then pull-4 ?

e.g. like this:

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-push-8 col-md-push-0"> <p>left</p><p>left</p><p>left</p></div>
    <div class="col-xs-8 col-xs-pull-4 col-md-pull-0 page-content about-us"> <p>Righ</p><p>Righ</p> </div>
  </div>
</div>
1 Like
3

Thanks, I couldn’t get it to work because I think I was using an older version of Bootstrap which was annoying as I spent ages on it! Thanks for the reply. I actually used that code on another website :slight_smile:

I am using Bootstrap 4 so figured I could use this class to reverse the columns:

<div class="row flex-column-reverse flex-lg-row">

1 Like
4

Yes bootstrap4 is much easier using flex :slight_smile:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.