css - Bootstrap 3: pull-right for col-lg only

Question

New to bootstrap 3.... In my layout I have:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right">
            elements 2
         </div>
    </div>
</div>

I would like the 'elements 2' to NOT be aligned right on smaller than col-lg screens. So effectively having the class pull-right only for col-lg-6...

How could I achieve this?

Here is a fiddle: http://jsfiddle.net/thibs/Y6WPz/

Thank-you

Answer 1

You could put "element 2" in a smaller column (ie: col-2) and then use push on larger screens only:

<div class="row">
    <div class="col-lg-6 col-xs-6">elements 1</div>
    <div class="col-lg-6 col-xs-6">
      <div class="row">
       <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
         <div class="pull-right">elements 2</div>
       </div>
      </div>
    </div>
</div>

Demo: http://bootply.com/88095

Another option is to override the float of .pull-right using a @media query..

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

Lastly, another option is to create your own .pull-right-lg CSS class..

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

UPDATE

Bootstrap 4 includes responsive floats, so in this case you'd just use float-lg-right.
No extra CSS is needed.

Bootstrap 4 Demo