title: CSS: 3 or 4 columns depending on device orientation
body: <p>I want to achieve the following: I have a total of 12 divs, inside one div.
  Depending on the media query (tablet portrait, tablet landscape, mobile portrait, mobile landscape etc..),I want to show three columns with four divs inside or four columns with three divs inside.</p>
  
  <p>This should be the end results:</p>
  
  <p><strong>3 columns, four divs per column</strong>
  <a href="https://i.stack.imgur.com/6LXaw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6LXaw.png" alt="enter image description here"></a></p>
  
  <p><strong>4 columns, three divs per column</strong>
  <a href="https://i.stack.imgur.com/u6ZKp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u6ZKp.png" alt="enter image description here"></a></p>
  
  <p>I'm having problems with figuring out an way to achieve this with CSS only.</p>
  
  <pre><code>&lt;div className="cb-Categorie-Wrapper"&gt;
      &lt;div className="cb-Categorie" id="categorie-Fictie"&gt;&lt;span className="label"&gt;Fictie&lt;/span&gt;&lt;/div&gt;
      &lt;div className="cb-Categorie" id="categorie-Thrillers-spanning" &gt;&lt;span className="label"&gt;Thrillers en spanning&lt;/span&gt;&lt;/div&gt;
      &lt;div className="cb-Categorie" id="categorie-Romantiek"&gt;&lt;span className="label"&gt;Romantiek&lt;/span&gt;&lt;/div&gt;
  
      &lt;div className="cb-Categorie" id="categorie-Kinderen-YA"&gt;&lt;span className="label"&gt;Kinderen en YA&lt;/span&gt;&lt;/div&gt;
      &lt;div className="cb-Categorie" id="categorie-Non-fictie"&gt;&lt;span className="label"&gt;Non-fictie&lt;/span&gt;&lt;/div&gt;
      &lt;div className="cb-Categorie" id="categorie-Reizen"&gt;&lt;span className="label"&gt;Reizen&lt;/span&gt;&lt;/div&gt;
  
      &lt;div className="cb-Categorie" id="categorie-Mens-ontwikkeling"&gt;&lt;span className="label"&gt;Mens en ontwikkeling&lt;/span&gt;&lt;/div&gt;
      &lt;div className="cb-Categorie" id="categorie-Management"&gt;&lt;span className="label"&gt;Management&lt;/span&gt;&lt;/div&gt;
      &lt;div className="cb-Categorie" id="categorie-Educatief"&gt;&lt;span className="label"&gt;Educatief&lt;/span&gt;&lt;/div&gt;
  
      &lt;div className="cb-Categorie" id="categorie-Engels"&gt;&lt;span className="label"&gt;Engelse boeken&lt;/span&gt;&lt;/div&gt;
      &lt;div className="cb-Categorie" id="categorie-Anderstalig"&gt;&lt;span className="label"&gt;Andere anderstalige boeken&lt;/span&gt;&lt;/div&gt;
      &lt;div className="cb-Categorie" id="categorie-Non-books"&gt;&lt;span className="label"&gt;Non-books&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I enclosed every three divs with an wrapper div that would be an block, with float:left (see picture: 4 columns, three divs per column), this made four columns next to eachother.</p>
  
  <p>But now the wish is to have the columns as picture 1 (3 columns, four divs).</p>
  
  <p>I am able to use Bootstrap3 if that's helpful.</p>