title: MDL "advanced" grid structure
body: <p>I'm trying to achieve something similar as the <a href="https://getmdl.io/templates/dashboard/" rel="nofollow">mdl dashboard example</a> where you have one card on the left and two cards on the right in desktop view (like first image in the imgur album),
  and when it changes to tablet layout then it becomes like the second image in the imgur album:</p>
  
  <p><a href="http://imgur.com/a/dT4Eo" rel="nofollow">http://imgur.com/a/dT4Eo</a></p>
  
  <p>The reason it works in the example is because img-C only has a width of 3 in tablet layout because there's a hidden 1-col separator to make up for the missing space caused by mdl-grid--no-spacing.</p>
  
  <p>My question is, how could this layout structure be achieved if I wanted both img-B and img-C to have a 4-col width in tablet layout?</p>