title: Responsive table by columns
body: <p>I have a table with four columns and I need to have a responsive table where each column will be below the other but I don't know how to do it. I hope that there is some answer without using Javascript.</p>
  
  <p>Now I have a table like this:</p>
  
  <pre><code>+---------------+
  | Some text     |
  +---------------+
  | A | B | C | D |
  +---+---+---+---+
  | A | B | C | D |
  +---+---+---+---+
  | A | B | C | D |
  +---+---+---+---+
  | A | B | C | D |
  +---+---+---+---+
  </code></pre>
  
  <p>And I need to get this result in smaller resolution:</p>
  
  <pre><code>+-----------+
  | Some text |
  +-----------+
  | A         |
  +-----------+
  | A         |
  +-----------+
  | A         |
  +-----------+
  | A         |
  +-----------+
  | B         |
  +-----------+
  | B         |
  +-----------+
  | B         |
  +-----------+
  | B         |
  +-----------+
  | B         |
  +-----------+
  </code></pre>
  
  <p>And so on. Is it somehow possible? Here is my <a href="http://jsfiddle.net/sr7p11h2/" rel="noreferrer">JSfiddle</a>. Also the answer in jsfiddle would be best.</p>