Responsive alignment in bootstrap - css

Question

I want to have 2 buttons groups in one row like this:
[a|b|c] [d|e|f|g|h]
Currently the right button group is a pull-right bootstrap class. Works fine.
But this looks horrible on xs devices - since it's in a new row but still pulled to the right, like this:
[a|b|c]
[d|e|f|g|h]
So what I basically want to do is to combine pull- classes.
pull-right pull-left-xs
Well this example don't work. Is there something similiar? Otherwise: how can I align my content right on md and xl devices and left on all other devices?

Answer 1

Twitter bootstrap has helper classes that could work for what you are trying to do, try with offset .pull and .push classes, something like col-md-push-3 will push your 3 columns only for .md and .lg classes, if you want a different behavior on mobile just reset it to col-xs-push-0.
Check this link for reference http://getbootstrap.com/css/#grid-column-ordering

Answer 2

Why do you need a pull-right. Can't you get the same effect using offset. http://getbootstrap.com/css/#grid-offsetting
So for example you could have
<div class="row">
<div class="col-sm-3 col-xs-4">[a|b|c]</div>
<div class="col-sm-5 col-sm-offset-4 col-xs-8">[d|e|f|g|h]</div>
</div>
For sm screens it will have the offset spacing in between, then for xs it will put it next to each other.

Answer 3

You could use media query and custom class like this..
#media (min-width: 992px) {
.pull-right-sm {
float: right;
}
}
http://bootply.com/i145F3q1Ji

Answer 4

I would steer clear of modifying Bootstrap classes because it will potentially affect other parts of the site where you need the styles to work as originally intended. You will likely also be creating a maintainability challenge for yourself or others in the future. Furthermore, the push and offset does not right align, so it would only get close to what you want.
Bootstrap 4 includes responsive classes that use the same breakpoints as the grid system (e.g. .text-sm-right, .text-md-left etc) that can be used in conjunction with one another as a solution to this. https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment

Answer 5

Old post but as it was the top answer in google for my search...
Using Bootstrap v4 you can use the float-* classes.
<div class="row">
<div class="col-md-6">
Always left aligned
</div>
<div class="col-md-6 float-md-right">
Right aligned for medium+, left aligned otherwise
</div>
</div>
https://getbootstrap.com/docs/4.1/utilities/float/#responsive