Изменение ширины анимации для столбца bootstrap без изменения размера экрана

Question

У меня есть ряд панелей, которые, при нажатии на них, должны расширяться на всю ширину экрана. До сих пор с моей тестовой панелью мне удавалось удлинить ее, но она переходит с одной ширины на другую, даже когда я включаю CSS переход.

Я использую Bootstrap 4.3 .1, и я не могу найти ничего в документации или других вопросах, которые решили проблему. Код для моего ряда панелей ниже:

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 navrow" id="test-panel">
        </div>
        <div class="col-md-3 navrow" id="second-panel">
        </div>
        <div class="col-md-3 navrow" id="third-panel">
        </div>
        <div class="col-md-3 navrow" id="fourth-panel">
        </div>
    </div>
</div>

JS

function init() {
    var testPanel = document.getElementById("art-box");
    testPanel.addEventListener("click",function(){
        testPanel.classList.remove("col-md-3");
        testPanel.classList.add("col-md-12");
    })
}

CSS

.navrow {
    height: 50vh;
}
#test-panel {
    background-color: orange;
    transition: width 1s ease;
}
#second-panel {
    background-color: green;
}
#third-panel {
    background-color: purple;
}
#fourth-panel {
    background-color: blue;
}