Bootstrap, pull-left for small devices

Question

I'm building a site in Bootstrap 3. Is there anyway to make a element use the class pull-left on smaller devices and use pull-right on larger ones?

Something like: pull-left-sm pull-right-lg.

I've managed to do it with jquery, catching the resize of the window. Is there any other way? Pref without duplicating the code in a hidden-x pull-left. Or is it considered more ok to duplicate code/content now when going responsive?

Answer 1

Just add this to your SASS file:

@media (max-width: $screen-xs-max) {
    .pull-xs-left {
        float: left;
    }
    .pull-xs-right {
        float: right;
    }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    .pull-sm-left {
        float: left;
    }
    .pull-sm-right {
        float: right;
    }
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    .pull-md-left {
        float: left;
    }
    .pull-md-right {
        float: right;
    }
}

@media (min-width: $screen-lg-min) {
    .pull-lg-left {
        float: left;
    }
    .pull-lg-right {
        float: right;
    }
}

Insert actual px values for $screen-* if you use plain CSS of course.

HTML:

<div class="pull-md-left pull-lg-left">
    this div is only floated on screen-md and screen-lg
</div>

Answer 2

You can use CSS Media Queries

basic usage will be like this; if you want to float left below devices of width 500px, then

@media (max-width: 500px) {
 .your_class {
    float: left;
  }
}

 @media (min-width: 501px) {
 .your_class {
    float: right;
  }
}