Jquery: Swap out HTML partials depending on screen resolution

Question

With the current project I am working on (Using Bootstrap 3), the client has asked for major changes to the structure for mobile views.

I have used Zurb Foundations Interchange in the past: http://foundation.zurb.com/docs/components/interchange.html - Which is just awesome!

I am wondering if anyone has used a bootstrap alternative? Or if you have coded this before, what has been your approach? I'm a little lost in which direction to go on this one. Searching seems to yield little results. I will probably just do this programmatically, but like the idea of JS handling it.

Many thanks

Answer 1

I had to do this for a client and I used the built in Bootstrap visible-xs , invisible-s etc. to end up with several different versions of the page depending on the screen size. It was a bit fiddly but it didn't need any JavaScript and is easy to modify. It's an option at least and as you're already using Bootstrap everything you need is there.