Jquery manipulate DOM on mobile only

Question

I have a bootstrap column system, however the way they are stacked, on mobile I would like to move one of the elements to appear before another. I believe this can be done with .append().

Is it possible to move the element I want with append() but only on mobile?

Thanks

Answer 1

You can do it by first checking whether your device's browser supports touch events (eg desktop does not, mobile does)

If it does you can execute the append and if not, nothing will happen.

var isMobile = (function() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
})();

if(isMobile) {
    your append action
}

Answer 2

http://detectmobilebrowsers.com/

Here you can get javascript/jquery file with the function based on regex for all the mobile/tablet devices. If you select some of them and build two separate functions for the mobile/tablet you could do regex for tablet and for the mobile only.

Hope it helps :)