Change number of entries in multiple lists based on viewport size

Question

I have the code below, where I am generating a new list for each 16 entries using Grouper plugin. Note, these list items are being ordered by last name.

However, when the viewport width is reduced and those columns collapse underneath one another, the alphabetical ordering is no longer correct.

I thought if I used MX Mobile Detect plugin, I could write a conditional to output a different groupby="number" based on the viewport size, but unfortunately that plugin is not working on EE v2.10.1, throws an infinite loop and page won't load, and it doesn't look like it's supported any longer.

2 questions:

1. Are there any plugins to achieve what I'm trying to accomplish?
2. If not, any recommendations on how to accomplish this?

HTML:

<div class="col-holder clearfix text-capitalize speakers-menu large-menu">
    {exp:channel:entries channel="speakers" dynamic="off" orderby="last_name" search:navigation_exclude="not y" sort="asc"}
        {exp:grouper:start groupby="16" count="{count}" total="{total_results}"}
            <ul class="list-unstyled">
        {/exp:grouper:start}
                <li><a href="{url_title_path='site/speaker'}">{title}</a></li>  
        {exp:grouper:end groupby="16" count="{count}" total="{total_results}"}
            </ul>
        {/exp:grouper:end}
    {/exp:channel:entries}                                  
</div>

As an added note, I was able to build something out that works as a temp fix, but definitely clunky and redundant code and not how I like it. I assigned a different class to each div, large-menu and small-menu.

HTML:

<div class="col-holder clearfix text-capitalize speakers-menu large-menu">
    {exp:channel:entries channel="speakers" dynamic="off" orderby="last_name" search:navigation_exclude="not y" sort="asc"}
        {exp:grouper:start groupby="16" count="{count}" total="{total_results}"}
            <ul class="list-unstyled">
        {/exp:grouper:start}
                <li><a href="{url_title_path='site/speaker'}">{title}</a></li>  
        {exp:grouper:end groupby="16" count="{count}" total="{total_results}"}
            </ul>
        {/exp:grouper:end}
    {/exp:channel:entries}                                  
</div>
<!-- -->
<div class="col-holder clearfix text-capitalize speakers-menu small-menu">
    {exp:channel:entries channel="speakers" dynamic="off" orderby="last_name" search:navigation_exclude="not y" sort="asc"}
        {exp:grouper:start groupby="45" count="{count}" total="{total_results}"}
            <ul class="list-unstyled">
        {/exp:grouper:start}
                <li><a href="{url_title_path='site/speaker'}">{title}</a></li>  
        {exp:grouper:end groupby="45" count="{count}" total="{total_results}"}
            </ul>
        {/exp:grouper:end}
    {/exp:channel:entries}                                  
</div>

CSS:

@media only screen and (max-width: 1023px) {
  .small-menu {
    display: block;
  }
  .large-menu {
    display: none;
  }

}
@media only screen and (min-width: 1024px) {
  .small-menu {
    display: none;
  }
  .large-menu {
    display: block;
  }
}

Answer 1

Friend-o, the DOM viewport is client side.

http://detectmobilebrowsers.com

Using these scripts you can detect the user-agent header. This still won't tell you the viewport size, just if someone is on mobile.

To do exactly what you want, you'd have to write some JavaScript to watch the viewport size and then rebuild your channel entries loop with ajax. This will help:

https://stackoverflow.com/questions/13138100/loading-entries-in-expressionengine-with-ajax