title: Having difficulty creating a Grid layout using vue-material framework
body: <p>I am attempting to create a four row layout with each row containing two columns using the vue-material framework. </p>
  
  <p>The layout should be responsive </p>
  
  <p>The columns should stack on each other when the viewport size is equal to or less than 600px. </p>
  
  <p><a href="https://i.stack.imgur.com/zLTNe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zLTNe.png" alt="Image when Stacked "></a></p>
  
  <p>The columns should have a normal layout like this : </p>
  
  <p>Image when not stacked.</p>
  
  <p><a href="https://i.stack.imgur.com/iLtoJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iLtoJ.png" alt="Image when not stacked"></a></p>
  
  <p>This content is not stacking when I reduce the screen size. </p>
  
  <p><a href="https://jsfiddle.net/u9604sv2/11/" rel="nofollow noreferrer">Code using vue material </a></p>
  
  <p>This is the code | HTML</p>
  
  <pre><code>&lt;div id="app"&gt;
  
    &lt;div class="edit"&gt;
  
      &lt;h1 class="md-display-3"&gt;Connect to be more&lt;/h1&gt;
      &lt;h2 class="md-subhead"&gt;Always be aware of the state of your business &lt;/h2&gt;
  
    &lt;/div&gt;
  
    &lt;div id="canvas"&gt;
  
      &lt;md-layout md-row md-columns id="rightColumn"&gt;
  
        &lt;md-layout md-column&gt;
          &lt;h1 class="" id="entitle"&gt;Connect soft documents&lt;/h1&gt;
        &lt;/md-layout&gt;
  
          &lt;md-layout md-column&gt;
          &lt;h1 class="" id="entitle"&gt;Connect soft documents&lt;/h1&gt;
        &lt;/md-layout&gt;
  
  
      &lt;/md-layout&gt;
  
    &lt;/div&gt;
  
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the code | CSS </p>
  
  <pre><code>.edit {
    text-align: center;
      font-family: Heiti SC;
  }
  
      #entitle {
  
      line-height: 1.2em;
      }
  .md-display-3 {
  
    font-family: Heiti SC;
  }
  
  /*  media queries  */
  
  
  /*  tablet  */
  
  @media screen and (max-width: 600px) {
    .md-column {
      float: none !important;
      margin: auto;
      text-align: center;
      width: 46%;
    }
  }
  
  
  #rightColumn {
    background-color: aqua;
    font-family: Heiti SC;
  }
  </code></pre>