title: How to collapse a responsive CSS grid to 2 columns instead of 1?
body: <p>I have this CSS grid setup which works perfectly, it displays 6 columns when viewed on a desktop and collapses to 1 when viewed on a mobile device. </p>
  
  <p>However, I'd like it to collapse to 2 columns rather than 1 when viewed on a mobile device, I can't work out what I have to change to do this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*  SECTIONS  */
  .section {
      clear: both;
      padding: 0px;
      margin: 0px;
          text-align: center;
  }
  
  /*  COLUMN SETUP  */
  .col {
      display: block;
      float:left;
      margin: 1% 0 1% 1.6%;
  }
  .col:first-child { margin-left: 0; }
  
  /*  GROUPING  */
  .group:before,
  .group:after { content:""; display:table; }
  .group:after { clear:both;}
  .group { zoom:1; /* For IE 6/7 */ }
  
  //*  GRID OF SIX  */
  .span_6_of_6 {
      width: 100%;
  }
  
  .span_5_of_6 {
      width: 83.06%;
  }
  
  .span_4_of_6 {
      width: 66.13%;
  }
  
  .span_3_of_6 {
      width: 49.2%;
  }
  
  .span_2_of_6 {
      width: 32.26%;
  }
  
  .span_1_of_6 {
      width: 15.33%;
  }
  
  /*  GO FULL WIDTH BELOW 480 PIXELS */
  @media only screen and (max-width: 480px) {
      .col {  margin: 1% 0 1% 0%; }
      .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="section group"&gt;
      &lt;div class="col span_1_of_6"&gt;
  &lt;span style="font-size:35px;"&gt;&lt;i class="fas fa-wifi"&gt;&lt;/i&gt;&lt;/span&gt;&lt;br /&gt;Wifi
      &lt;/div&gt;
      &lt;div class="col span_1_of_6"&gt;
  &lt;span style="font-size:35px;"&gt;&lt;i class="fas fa-tv"&gt;&lt;/i&gt;&lt;/span&gt;&lt;br /&gt;Smart TV With Freeview
      &lt;/div&gt;
      &lt;div class="col span_1_of_6"&gt;
  &lt;img width="75px" src="https://www.stickpng.com/assets/images/580b57fcd9996e24bc43c529.png"&gt;&lt;/img&gt;&lt;br /&gt;Netflix
      &lt;/div&gt;
      &lt;div class="col span_1_of_6"&gt;
  &lt;img width="75px" src="https://www.stickpng.com/assets/images/580b57fcd9996e24bc43c548.png"&gt;&lt;/img&gt;&lt;br /&gt;YouTube
      &lt;/div&gt;
      &lt;div class="col span_1_of_6"&gt;
  &lt;img width="50px" src="https://image.flaticon.com/icons/svg/2047/2047381.svg"&gt;&lt;/img&gt;&lt;br /&gt;Towels
      &lt;/div&gt;
      &lt;div class="col span_1_of_6"&gt;
  &lt;img width="50px" src="https://image.flaticon.com/icons/svg/125/125669.svg"&gt;&lt;/img&gt;&lt;br /&gt;Hair Dryer
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>