title: How to style a table from horizontal layout to vertical layout with CSS
body: <p>I am trying to make a table, original is like this (for desktop version)</p>
  
  <p><img src="https://i.stack.imgur.com/jI8JG.png" alt="Original"></p>
  
  <p>I am using media queries to change it like this on mobile version and need to make it with pure CSS</p>
  
  <p><img src="https://i.stack.imgur.com/2bpPH.png" alt="enter image description here"></p>
  
  <p>How could you made this?</p>
  
  <p>Here is my Jsfiddle </p>
  
  <p><a href="http://jsfiddle.net/478c6yxg/2/" rel="nofollow noreferrer">http://jsfiddle.net/478c6yxg/2/</a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>1st try thanks to Andy <a href="https://jsfiddle.net/st8kcqyu/" rel="nofollow noreferrer">https://jsfiddle.net/st8kcqyu/</a></p>
  
  <p>2nd try thanks to Exodus <a href="http://jsfiddle.net/478c6yxg/5/" rel="nofollow noreferrer">http://jsfiddle.net/478c6yxg/5/</a></p>
  
  <p>And my html code</p>
  
  <pre><code>&lt;div class="view-content"&gt;
      &lt;table class="views-table cols-6" border="1" cellspacing="0"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th class="views-field views-field-scald-thumbnail"&gt;
                  &lt;/th&gt;
                  &lt;th class="views-field views-field-title"&gt;
                      Title&lt;/th&gt;
                  &lt;th class="views-field views-field-field-colour"&gt;
                      Colour&lt;/th&gt;
                  &lt;th class="views-field views-field-field-size"&gt;
                      Size&lt;/th&gt;
                  &lt;th class="views-field views-field-quantity"&gt;
                      Quantity&lt;/th&gt;
                  &lt;th class="views-field views-field-commerce-total"&gt;
                      Price&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr class="odd views-row-first views-row-last"&gt;
                  &lt;td class="views-field views-field-scald-thumbnail"&gt;
                      &lt;img src="http://placehold.it/84x114" width="84" height="114" alt=""&gt;
                  &lt;/td&gt;
                  &lt;td class="views-field views-field-title"&gt;
                      Manteau vert M&lt;/td&gt;
                  &lt;td class="views-field views-field-field-colour"&gt;
                      Vert&lt;/td&gt;
                  &lt;td class="views-field views-field-field-size"&gt;
                      34&lt;/td&gt;
                  &lt;td class="views-field views-field-quantity"&gt;
                      1&lt;/td&gt;
                  &lt;td class="views-field views-field-commerce-total"&gt;
                      $120.00&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>