Masonry gallery elements not stacking correctly on tablet

We have a site with 4 individual masonry gallery elements in a row set to display 1 image each. We have it like this because each one has a number of link-relevant images inside that are randomised so that a different image appears on each load. This is the code in functions.php to randomise the images.

add_filter('avia_masonry_entries_query', 'avia_random_image_query', 10, 2);
function avia_random_image_query($query, $params)
{
    if(!empty($query['post_mime_type']) && $query['post_mime_type'] == 'image')
    {
        $query['orderby'] = "rand";
    }

    return $query;
}

We have used this code to stretch each masonry entry to the full width of a 1/4 column:

.page-id-278 .av-masonry-entry
{width: 100%;}

This works on desktop and mobile but the problem is that on tablet (or when the browser is around that width) the elements don’t stack correctly.
See attached screenshots.

Thanks.