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!