Trying to have a different set of images for mobile than desktop in my homepage gallery slideshow reel

Hi All - 

So for my homepage i have a full-bleed gallery slideshow that cycles through some of my images.  The issue is that on mobile, the images don't present as well as they are landscape images and I want to try to display a different set of images for mobile in portrait orientation. 
What I've tried to do is have 6 portrait images at the beginning of my slideshow and specifying their visibility to be hidden on desktop, but visible in mobile using the index in which they are listed in the parent element (:nthchild(x+6)).  
From what I've gathered on page inspection, it appears that whenever the slideshow cycles the next image, the figure for that next image is pushed to the bottom of the following parent element that contains all of the figures:

<div class="gallery-fullscreen-slideshow-list" style="height: 286px;">

and the figure  element updates visibility from hidden to visible, so due to this nth-child selector does not work as the active image is always the last child in the parent element.

Does anyone have a solution for this?
 

9 minutes ago, Ziggy said:

You may be better off having two gallery sections one for desktop and one for mobile, then use media queries to show/hide the two sections on mobile/desktop.

This worked beautifully, thank you so much 🙂

29 minutes ago, tnegrin said:

This worked beautifully, thank you so much 🙂

I always like a simpler solution if there's one available!