SOURCE

const btn = document.getElementById('btn');
const container = document.getElementById('container');
btn.addEventListener('click', e => {
  if (!container.classList.container('wrapperMobile'))
  	container.classList.add('wrapperMobile');
  else
    container.classList.remove('wrapperMobile');
});

<div id="container" class="wrapperDesktop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="five">5</div>
</div>

<button id="btn">change</button>

.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;
    }
}