If I understand your question correctly, you can actually do this entirely with Bootstrap, no js needed!

To style the way it looks below the 768px breakpoint, just use col-xs-. To style the way it looks above 768, use col-sm-. You can't swap the order of the stacked columns (it'll always be the order they appear in the same order as in the markup), but you can use push and pull to change the order above the 768 breakpoint.

In the markup, order your columns the way you want them to appear when stacked

Add your xs classes - I'm not sure I understand what you want, but I think .col-xs-10.col-xs-offset-1

Add your "bigger-than-xs" classes. So .col-sm-5 and .col-sm-7, remove the offsets with .col-sm-offset-0, and then switch the order by pushing the one column and pulling the other

Here's a working snippet. View it full-window to see how it works above 768. The result will look like this:

Wide (Bootstrap sm and above):

Narrow (Bootstrap xs):

(The pink area is just to show that the stacked columns are centered col-10)