Lee Lee - 5 months ago 30
CSS Question

Bootstrap col-push, col-pull

I have the following code:

<div class="col-md-9 col-md-offset-3">
<div class="row">
<div class="col-sm-4 col-sm-push-4">
</div>
<div class="col-sm-8 col-sm-pull-8">
</div>
</div>
</div>


The reason for the push and pull is that I want those 2 columns to swap on mobile. Currently it works fine on mobile, however on desktop - instead of looking like this:

enter image description here

The columns jump out of the col-md-9 like so:

enter image description here

If I remove the push and pull, they stay put. So it's definitely something to do with that.

How do I stop them breaching the col-md-9?

Answer

You have to change your push/pull classes.

<div class="col-md-9 col-md-offset-3">
  <div class="row">
    <div class="col-sm-4 col-sm-push-8">
    </div>
    <div class="col-sm-8 col-sm-pull-4">
    </div>
  </div>
</div>