title: 3 column table on a desktop browser to 1 column on a mobile
body: <p>I've currently got a 3-column table, which shows quite well in a desktop browser - until the cell text becomes a little too long or the browser window is too narrow. That's when it starts looking a little weird. This is currently what I'm using:</p>
  <p>CSS:</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>/* Start tour stats 3 column box */
  .tour-stats {
      float: left;
      width: 100%;
      margin-bottom: 24px;
      box-sizing: border-box; border-left: 1px dotted #ccc;
      border-top: 1px dotted #ccc;
      background: #daeaf2;
  }
  .tour-stats .stat {
      float: left;
      width: 33.3%;
      box-sizing: border-box; padding-left: 50px;
      font-size: 0.9em;
      font-weight: bold;
      padding-top: 12px;
      padding-bottom: 12px;
      border-bottom: 1px dotted #ccc; border-right: 1px dotted #ccc;
  }
  .tour-stats .stat.distance {
      background: url('https://www.rtw.bike/wp-content/icons/tour-stats/distance.png') no-repeat 15px center transparent;
      background-size: 25px 25px;
  }
  .tour-stats .stat.start {
      background: url('https://www.rtw.bike/wp-content/icons/tour-stats/startflag.png') no-repeat 15px center transparent;
      background-size: 25px 25px;
  }
  .tour-stats .stat.stop {
      background: url('https://www.rtw.bike/wp-content/icons/tour-stats/stop.png') no-repeat 15px center transparent;
      background-size: 25px 25px;
  }
  .tour-stats .stat.time {
      background: url('https://www.rtw.bike/wp-content/icons/tour-stats/time.png') no-repeat 15px center transparent;
      background-size: 23px 23px;
  }
  .tour-stats .stat.avg-speed {
      background: url('https://www.rtw.bike/wp-content/icons/tour-stats/avgspeed.png') no-repeat 15px center transparent;
      background-size: 25px 25px;
  }
  .tour-stats .stat.tot-distance {
      background: url('https://www.rtw.bike/wp-content/icons/tour-stats/totaldistance.png') no-repeat 15px center transparent;
      background-size: 25px 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tour-stats"&gt;
      &lt;div class="stat start"&gt;Corowa (08:12)&lt;/div&gt;                    
      &lt;div class="stat distance"&gt;128.21 km&lt;/div&gt;                  
      &lt;div class="stat avg-speed"&gt;20.6&lt;/div&gt;
      
      &lt;div class="stat stop"&gt;Shepparton (16:38)&lt;/div&gt;                 
      &lt;div class="stat time"&gt;6:13:57&lt;/div&gt;
      &lt;div class="stat tot-distance"&gt;573.40 km*&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help would be useful!
  Stephen.</p>