Getting columns and rows to align or masking flaw with z-index layer

I've been trying for hours to get columns and rows to align nicely, but it also has to be responsive, so that's tricky...

To work around this problem I thought I'd use z-index with the footer and put it on top of the row, so the 'not aligning parts' would fall behind the footer.

If you look al this page you'll see the problem (when you scale the browser window): 

 http://nieuw.sousfresh2018.com/groente-en-fruit/

The columns don't align anymore (at the bottom) and cover part of the footer.

Is there a way to solve this? Best way would be to get the columns and rows to align nicely, but if you can get the footer to go on top (or the rows to go to the bottom) using z-index, that's fine to. 

Thanks for your help!

Cheers,

Maikel