Opencart 2.3 How to change the displayed number of products in a row from 3 to 4?

Question

opencart

Hello everyone, there is a problem with the custom template, you need to display 4 products in a row.
I tried layout, but everything turns out very clumsily: (
something doesn’t work in common.js, it looks like this

// Product Grid
  $('#grid-view').click(function() {
    // What a shame bootstrap does not take into account dynamically loaded columns
    var cols = $('#column-right, #column-left').length;

        if (cols == 2) {
              $('#content .product-list').attr('class', 'product-layout product-items product-grid col-xl-4 col-lg-6 col-md-4 col-sm-4 col-6');
            } else if (cols == 1) {
              $('#content .product-list').attr('class', 'product-layout product-items product-grid col-xl-3 col-lg-4 col-sm-4 col-6');
            } else {
              $('#content .product-list').attr('class', 'product-layout product-items product-grid col-lg-3 col-md-4 col-sm-4 col-6');
            }
        
    $('#list-view').removeClass('active');
        $('#pricelist-view').removeClass('active');
    $('#grid-view').addClass('active');

    localStorage.setItem('display', 'grid');
  });

I will be glad to any advice)

Answer 1

col-md-4 col-sm-4
for example, replace with col-md-3 col-sm-3
look at the bootstrap help for which devices these classes are and correct the necessary ones