It looks like you used a table for the output format for the custom product archive.
Tables don't lend themselves to responsive layouts.
Toolset works with Bootstrap, and you can choose a Bootstrap grid as an output format.
There is a limitation, though, because of how Bootstrap works with rows, such that you can collapse from, say, 4 to 2 to 1, because if you include 4 items in a row that displays as 2 columns then they will wrap and show 2 and 2.
But if you have a row with 3 items and try to show it on a two column row it will wrap and show 2 and 1, then start a new row, leaving gaps in the grid.
The solution would be to modify the Loop Editor so that instead of starting a new row after every 3 items, you include all the items in a single row and let them flow accordingly. Here's an example of the required markup: hidden link
That assumes you are using Bootstrap.
If not you can quite easily roll-your-own flexbox grid, for which you would want to edit your View so that the markup generated matched what's required. Here is an example you could adapt, for example: hidden link
If you have a preference but have problems editing the View to implement it, let me know.
