console
const btn = document.getElementById('btn');
const container = document.getElementById('container');
btn.addEventListener('click', e => {
if (!container.classList.contains('wrapperMobile'))
container.classList.add('wrapperMobile');
else
container.classList.remove('wrapperMobile');
});
<button id="btn">change</button><div id="container" class="wrapperDesktop">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="five">5</div>
</div>
.wrapperDesktop div,
.wrapperMobile div
{
background: yellow;
border: 1px solid black;
}
.wrapperDesktop {
display: grid;
grid-template-columns: 200px 200px 100px 100px;
grid-template-rows: 100px 30px;
.five {
grid-column-start: 1;
grid-column-end: 5;
}
}
.wrapperMobile {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px 30px;
.five {
grid-column-start: 1;
grid-column-end: 3;
}
}