New to bootstrap 3.... In my layout I have:
elements 1
-
You could put "element 2" in a smaller column (ie: col-2) and then use push on larger screens only:
elements 1
elements 2
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