Opencart 3 Grid System Undestand category grid-view

Question

I want to change product-grid-view system programmatically or by action...

From

<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12"></div>

to

<div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>

however, it is not clear to me from where these classes are generated.

From what I have learned there are two files that need to be modified:

category.twig
common.js

category.twig code:

 {% if column_left and column_right %}
    {% set class = 'col-md-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-md-8' %}
    {% else %}
    {% set class = 'col-md-10' %}
    {% endif %}

common.js code:

// Product Grid
$('#grid-view').click(function() {

    console.log("GRID CLICKED");
    // What a shame bootstrap does not take into account dynamically loaded columns
    var cols = $('#column-right, #column-left').length;

    if (cols == 2) {
        console.log("cols == 2");
        $('#pts-content .product-list').attr('class', 'product-layout product-grid col-lg-6 pts-col-md-6 pts-col-sm-12 col-xs-12');
    } else if (cols == 1) {
        console.log("cols == 1");
        $('#pts-content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 pts-col-sm-6 col-xs-12');
    } else {
        console.log("cols == else");
        $('#pts-content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 pts-col-sm-6 col-xs-12');
    }

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

When i click on grid button, console output are:

cols == 1

but col-lg-4 remain also if i have changed in col-lg-3.

I have, also cleaned any tipe of cache and modification...

Can you help me to understand well how to change column grid from lg-4 to lg-3? Thanks in advance