JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="toggleLayout">Toggle Layout</button>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</section>

<p>If you're not seeing the styles toggle based on screen width, make sure you adjust the preview area to be &gt; or &lt; 400px</p>

CSS

/*small screen styles*/
  div {background-color:#484;display:inline-block;width:50px;height:50px;margin:10px;}
  
    
/*conditional wide-screen styles*/
/*I changed the query here so the preview window would be wide-enough to demonstrate*/
@media only screen and (min-width: 400px) {
    #wideLayout div {background-color:#848;display:block;width:auto;height:80px;margin:10px 0 0 0;}
}

JavaScript

$('#toggleLayout').on('click',function(){
  if ($('section').attr('id') == "wideLayout"){
    $('section').attr('id','');
  } else {
    $('section').attr('id','wideLayout');
  }
});