Bootstrap 3 pull-right for col-lg only

Question

New to bootstrap 3     In my layout I have    lt div class  row  gt       lt div class  col-lg-6 col-md-6  gt elements 1 lt  div gt       lt div class  col-lg-6 col-md-6  gt            lt div class  pull-right  gt              elements 2           lt  div gt       lt  div gt   lt  div gt    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

User · Answer

Works fine too      small screen portrait      media  max-width  321px        pull-right        float  none important               small screen lanscape      media  max-width  480px        pull-right       float  none important

User · Answer

Adding the CSS shown below to your Bootstrap 3 application enables support for  pull- e sm- md- lg- left pull- e sm- md- lg- right   classes that work exactly like the new  float- e sm- md- lg- xl- left float- e sm- md- lg- xl- right   classes that have been introduced in Bootstrap 4    media  min-width  768px         pull-sm-left           float  left  important             pull-sm-right           float  right  important             pull-sm-none           float  none  important           media  min-width  992px         pull-md-left           float  left  important             pull-md-right           float  right  important             pull-md-none           float  none  important           media  min-width  1200px         pull-lg-left           float  left  important             pull-lg-right           float  right  important             pull-lg-none           float  none  important           pull-none       float  none  important      Apart from that  it adds  pull- e sm- md- lg- none   for completeness  being compatible with  float- e sm- md- lg- xl- none   from Bootstrap 4

User · Answer

It is very simple using Sass  just use  extend    pull-right-xs         extend  pull-right

User · Answer

For those interested in text alignment  a simple solution is to create a new class    text-right-large       text-align  right     media  max-width  991px         text-right-large           text-align  left            Then add that class    lt div class  row  gt       lt div class  col-lg-6 col-md-6  gt elements 1 lt  div gt       lt div class  col-lg-6 col-md-6 text-right-large  gt          elements 2      lt  div gt   lt  div gt

User · Answer

Try this LESS snippet  It s created from the examples above  amp  the media query mixins in grid less      media  min-width   screen-sm-min     pull-right-sm     float  right       media  min-width   screen-md-min     pull-right-md     float  right       media  min-width   screen-lg-min     pull-right-lg     float  right

User · Answer

This problem is solved in bootstrap-4-alpha-2   Here is the link  http   blog getbootstrap com 2015 12 08 bootstrap-4-alpha-2   Clone it on github  https   github com twbs bootstrap tree v4 0 0-alpha 2

User · Answer

This is what i am using   change  screen-md-max for other sizes     Pull left in lg resolutions     media  min-width   screen-md-max         pull-xs-right           float  right  important             pull-xs-left           float  left  important              radio-inline pull-xs-left     radio-inline pull-xs-left        checkbox-inline pull-xs-left     checkbox-inline pull-xs-left            margin-left  0             radio-inline pull-xs-left   checkbox-inline pull-xs-left          margin-right  10px

User · Answer

There is no need to create your own class with media queries  Bootstrap 3 already has float ordering for media breakpoints under Column Ordering  http   getbootstrap com css  grid-column-ordering  The syntax for the class is col- lt  grid-size gt - push pull - lt  cols gt  where  lt  grid-size gt  is xs  sm  md or lg and  lt  cols gt  is how far you want the column to move for that grid size  Push or pull is left or right of course   I use it all the time so I know it works well

User · Answer

now include bootstrap 4    import url  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 3 css bootstrap min css      and code should be like this    lt div class  row  gt       lt div class  col-lg-6 col-md-6  style  border solid 1px red  gt elements 1 lt  div gt       lt div class  col-lg-6 col-md-6  style  border solid 1px red  gt            lt div class  pull-lg-right pull-xl-right  gt              elements 2           lt  div gt       lt  div gt   lt  div gt

User · Answer

You can use push and pull to change column ordering  You pull one column and push the other on large devices    lt div class  row  gt       lt div class  col-lg-6 col-md-6 col-lg-pull-6  gt elements 1 lt  div gt       lt div class  col-lg-6 col-md-6 col-lg-push-6  gt            lt div gt              elements 2           lt  div gt       lt  div gt   lt  div gt

User · Answer

Just use bootstrap s responsive utility classes   The best solution for that task is to use the following code    lt div class  row  gt       lt div class  col-lg-6 col-md-6  gt elements 1 lt  div gt       lt div class  col-lg-6 col-md-6 text-right  gt           lt div class  visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block  gt              elements 2          lt  div gt       lt  div gt   lt  div gt    Element will be aligned to the right only on lg screens - on the rest the display attribute will be set to block as it is by default for div element  This approach is using text-right class on the parent element instead of pull-right   Alternative solution   The biggest disadvantage is that the html code inside needs to be repeated twice    lt div class  row  gt       lt div class  col-lg-6 col-md-6  gt elements 1 lt  div gt       lt div class  col-lg-6 col-md-6  gt            lt div class  pull-right visible-lg  gt              elements 2           lt  div gt            lt div class  hidden-lg  gt              elements 2           lt  div gt       lt  div gt   lt  div gt

User · Answer

pull-right-not-xs   pull-right-not-sm   pull-right-not-md   pull-right-not-lg      float  right      pull-left-not-xs   pull-left-not-sm   pull-left-not-md   pull-left-not-lg      float  left     media  max-width  767px             pull-right-not-xs   pull-left-not-xs          float  none             pull-right-xs           float  right             pull-left-xs           float  left           media  min-width  768px  and  max-width  991px         pull-right-not-sm   pull-left-not-sm          float  none             pull-right-sm           float  right             pull-left-sm           float  left           media  min-width  992px  and  max-width  1199px         pull-right-not-md   pull-left-not-md          float  none             pull-right-md           float  right             pull-left-md           float  left           media  min-width  1200px         pull-right-not-lg   pull-left-not-lg          float  none             pull-right-lg           float  right             pull-left-lg           float  left

User · Answer

You could put  element 2  in a smaller column  ie  col-2  and then use push on larger screens only    lt div class  row  gt       lt div class  col-lg-6 col-xs-6  gt elements 1 lt  div gt       lt div class  col-lg-6 col-xs-6  gt         lt div class  row  gt          lt 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  gt            lt div class  pull-right  gt elements 2 lt  div gt          lt  div gt         lt  div gt       lt  div gt   lt  div gt    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  gt   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

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

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to bootstrap-4