How do I apply jquery for mobile only?

Question

I need to apply the following jquery for mobile browsers only:

<script>
   $('.right').insertBefore('left');
</script>

This is to reorder the position of bootstrap columns.

How do I do this? Does it need to be wrapped in something?

Answer 1

It's always very hard to detect whether its a mobile device's browser or a laptop with a touch screen. So instead of detecting that; if you are concerned about the screen size then I will recommend you to detect the screen size and if its below certain level(lets say below 481px) then we will assume that its a mobile screen and will execute your needed code as follows:

$(document).ready(function () {
    $(window).on("resize", function (e) {
        checkScreenSize();
    });

    checkScreenSize();
    
    function checkScreenSize(){
        var newWindowWidth = $(window).width();
        if (newWindowWidth < 481) {
            $('.right').insertBefore('.left');
        }
        else
        {
            $('.left').insertBefore('.right');
        }
    }
});

Answer 2

To write jQuery that only applies for mobile devices, just use the sample below and it worked for me.

if(window.outerWidth < 425) {
  alert('your jquery code here - it fires for mobile device only');
}

Edit: Was the wrong symbol less than