Recommended ways to handle different layouts for desktop and mobile?

Help
1

In liquid, are there any possible ways to change what is rendered based on screen width
(similar to CSS media queries)?

For example, on desktop this would be the layout:

{% for item in items limit:5 %}
{{ item }}
{% endfor %}

But on mobile the layout would be:

{% for item in items limit:2 %}
{{ item }}
{% endfor %}

Usually I use two separate loops and then show/hide the output using css. Is there a different way to handle this?

2

Liquid does not run once the site has been built, so it cannot know what your screen size is.

CSS media queries or JavaScript is the way to go for something like this.