zeidanbm

What you’re saying is 100% correct you can’t use php for this. You need to use javascript. I ran into same problem. I think a clean solution would be to create an api call that will run a php code that runs the filter to adjust the rows. And then call it using ajax on screen resize.

Another quick solution is to adjust the css based on screen resize.
1) detect what screen size you want the rows to break from 3 into 2
2) write the javascript code (i’m using jquery)
3) make some calculations to determine how you gonna add the first and last classes ( in the code below it works for me cause i have 3 rows on large screens and 2 rows on smaller and then 1 row on mobile screens) you might need to change the modules numbers if you have 4 rows on large screens….

 $( window ).on("resize", function() {
      var windowWidth = $(window).width();
      if(windowWidth < 850){ // this is my screen size break point for the rows
        adjustProductRows(); // call the function to adjust add last and first classes
      } else {
        defaultProductRows(); // else if large screen size then get everything back to defalut
      }
    }); 

  function defaultProductRows(){
    var products = $('ul.cat-products li.type-product');
      products.each(function(idx, li) {
    	 var product = $(li);
         // remove all classes we added
  	 $('ul.cat-products li.adjusted-row.first').removeClass('adjusted-row first');
         $('ul.cat-products li.adjusted-row.last').removeClass('adjusted-row last');
      if(idx == 0) { // make sure first li tag gets first class
        	product.addClass('first');
      }
      else if((idx+1) % 3 == 0) //this will make sure we have 3 rows by adding last classes after each 3 products
      {
       	product.addClass('last');
      }
      else if(idx % 3 == 0)
      {
        product.addClass('first'); // make sure all products divided by 3 will have first       class
      }
      else
      {
        console.log(idx); // just checking for the index
      }

   		 
		});
  }
  
  function adjustProductRows() {
      
       var products = $('ul.cat-products li.type-product');
	products.each(function(idx, li) {
    	var product = $(li);
  
      if(idx % 2 == 0) // we are even
      {
        product.addClass('adjusted-row first');
        product.removeClass('last');
      }
      else // we are odd
      {
        product.addClass('adjusted-row last');
        product.removeClass('first');
      }

   		 
		});
    
  }