Responsive Bootstrap

Responsive Bootstrap

I recently added responsive bootstrap to an application and things are
working great. I've been able to make modifications to the layout based on
screen resolutions like the following in my application.css file:
* // other stuff up here...//
*
*= require_self
*= require bootstrap_and_overrides
*= require_tree .
*/
@media (min-width: 1200px) {
#winner_table { max-width: 30%; }
}
Now, I'm wondering if it's possible to make modifications like these to my
javascript based on screen resolution? Specifically, I want a popover on
an element to float right by default, but float up when using a phone.
What are my options to do something like this? I may be incorrect assuming
Responsive Bootstrap can solve the problem, but I feel like it is a
solvable problem somehow.