Pleas help me on css, javascript, active web

var colWrapper = document.querySelector("#col_wrapper");
var colChildren = colWrapper.children;

var colCopy = colChildren[0];

var mq = window.matchMedia("screen and (min-width: 1200px)");
var mq_tablet = window.matchMedia("screen and (min-width: 768px) and (max-width: 1199px)");
var mq_phone = window.matchMedia("screen and (max-width: 767px)");

mq.addListener(function(e)
{
    if (e.matches)
    {
        if (colWrapper.childElementCount == 8)
        {
            return;
        }
        else if (colWrapper.childElementCount == 9)
        {
            var rm_col = colWrapper.lastChild;
            colWrapper.removeChild(rm_col);
        }
        else if (colWrapper.childElementCount == 4)
        {
            for (var k = 0; k < 4; k++)
            {
                let colAdd = colCopy.cloneNode(true);
                colWrapper.append(colAdd);
            }
        }
    }
});

mq_tablet.addListener(function(event)
{
    if (event.matches)
    {
        if (colWrapper.childElementCount == 9)
        {
            return;
        }
        else if (colWrapper.childElementCount == 8)
        {
            let colAdd = colCopy.clonNode(true);
            colWrapper.append(colAdd);
        } 
        else if (colWrapper.childElementCount == 4)
        {
            for (var k = 0; k < 5; k++)
            {
                let colAdd = colCopy.cloneNode(true);
                colWrapper.append(colAdd);
            }
        }
    }
});

mq_phone.addListener(function(ev)
{
    if (ev.matches)
    {
        if (colWrapper.childElementCount == 4)
        {
            return;
        }
        else if (colWrapper.childElementCount == 8)
        {
            for (var a = 0; a < 4; a++)
            {
                let rm_col = colWrapper.lastChild;
                colWrapper.removeChild(rm_col);
            }
        }
        else if (colWrapper.childElementCount == 9)
        {
            for (var b = 0; b < 5; b++)
            {
                var rm_col = colWrapper.lastChild;
                colWrapper.removeChild(rm_col);
            }
        }
    }
});

enter image description here

enter image description here

What's wrong with it? Why is it 6 instead of 4? And when you reloaded it from the mobile version, why 8 instead of 4? How can I resolve this problem? If you have any other comments in my code, please advise. Thank you! Please.. it makes me mad mad tired.. I want to resolve this problem right now!!