woocommerce Shortcodes – Change display between mobile and Desktop

One easy way that comes to mind is to hide the elements in the mobile view via CSS using the nth-child selector.

That way, all five elements are still rendered in the source code, but only two of them are visible on devices below a certain resolution.

Example code assuming your product items are elements of the class item inside a container with the class products:

@media (max-width: 480px) /* replace with whatever mobile threshold the rest of your
                             CSS is using */
 {

   .products .item { display: none } /* Hide all elements by default */

   .products .item:nth-child(1),   /* Selectively re-enable 1st and 2nd element */
   .products .item:nth-child(2)
    { 
      display: block; /* Or whatever the elements' original display value is */
    }
 }

You can extend this code (using combinations of min-width and max-width) to adjust the number of items for very narrow and very large screens, too.