title: w3-css: Responsive 3 columns layout with different height blocks
body: <p>I am trying to build a responsive web layout with w3.css. It is supposed to consit of rows with three columns on large screens, two on medium, and one column on small/mobile devices. Each row consists of tiles which can have one of two fixed heights.  </p>
  
  <pre><code>&lt;div class="w3-content w3-white" style="max-width:600px"&gt;   
      &lt;div class="w3-row-padding "&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px"&gt;1&lt;/div&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px"&gt;2&lt;/div&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px"&gt;3&lt;/div&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px"&gt;4&lt;/div&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px"&gt;5&lt;/div&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px"&gt;6&lt;/div&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px"&gt;7&lt;/div&gt;                     
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd expect the following result in a large screen in 3 columns layout:</p>
  
  <p><a href="https://i.stack.imgur.com/NShsC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NShsC.png" alt="expected result"></a></p>
  
  <p>The above code is fine with a one and two column layout, but produces the following unwanted output with three columns:</p>
  
  <p><a href="https://i.stack.imgur.com/3IXGN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3IXGN.png" alt="unwanted output"></a></p>
  
  <p>If I end the w3-row-padding after three tiles, the three column layout is ok, but I get a mess with medium screens with two columns</p>
  
  <pre><code>&lt;div class="w3-content w3-white" style="max-width:600px"&gt;   
      &lt;div class="w3-row-padding"&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px"&gt;1&lt;/div&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px"&gt;2&lt;/div&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px"&gt;3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="w3-row-padding"&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px"&gt;4&lt;/div&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px"&gt;5&lt;/div&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px"&gt;6&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="w3-row-padding"&gt;
          &lt;div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px"&gt;7&lt;/div&gt;                     
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what the above code produces on medium screens:</p>
  
  <p><a href="https://i.stack.imgur.com/8FsjH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8FsjH.png" alt="medium screens"></a></p>
  
  <p>Any help is appreciated</p>