How to detect browser resize in Magento 2 using jQuery?

It is frequent to have requests from customers wanting to place blocks in totally different places in desktop and mobile. This type of requests do not fit the usual block placement using magento’s layout xml files. So, how can this be solved?

#1 Duplicate the block and hide one when on mobile/desktop using CSS rules

This is really not the best solution, specially if you are handling dynamic blocks. It also can result in duplicate content which is not good for SEO.

#2 Using jQuery to detect browser resize events and move the html element accordingly

This is a good approach in my book. Here is how you can implement it (include the following javascript in the page you want to make the change)

<script>
	require(['jquery'], function($){ 
		$( window ).resize(function() {
			if ($(this).width() <= 767) {
				// Mobile
				$(<selector for the html element to move>).insertBefore(<selector of the html element that will be after>);
			}
			else {
				// Desktop
				$(<selector for the html element to move>).insertBefore(<selector of the html element that will be after>);
			}
		});
	 });
</script>

Of course you can use other jQuery function instead of insertBefore depending on where in the DOM you want to place the html element want to move.

#3 Using magento built-in matchMedia library

<script>
require(['jquery','matchMedia'], function ($, mediaCheck) {
   'use strict';
    mediaCheck({
        media: '(min-width: 768px)',
        // Switch to Desktop Version
        entry: function () {
            /* Your function goes here */
            console.log('starting 768');			
        },
        // Switch to Mobile Version
        exit: function () {
            /* Your function goes here */
            console.log('leaving 768');			
        },
        // Mobile and Desktop Versions
        both: function () {
            /* Your function goes here */
            console.log('changing state');			
        }		
    });
});
</script>

That’s it!