List on Desktop, Grid on Mobile

Hi,

I would like to set it so that products display in list view on desktop and grid view on mobile. Where would I put the code below so that the grid/list layout is set based on the screen size just before the page loads?

<script>

const mq = window.matchMedia( "(min-width: 768px)" );

if (mq.matches) {
jQuery(document).ready(function(){
    jQuery('ul.products').addClass('list');
});
} else {
jQuery(document).ready(function(){
    jQuery('ul.products').addClass('grid');
});
}

</script>

I’ve tried the following:
https://wordpress.stackexchange.com/questions/71885/woocommerce-grid-list-view
And adding it to the file: jquery.gridlistview.min.js

But the format snaps back to the setting in the Customizer just before the category page finishes loading.

Is there somewhere in woocommerce-grid-list-toggle.php that would work?

I’ve added this code to the After Update section on the Javascript tab of the AJAX Products Filter plugin and it works – after a filter is modified, the format changes appropriately when a filter is updated.

Thanks,

Alex