Having difficulty creating a Grid layout using vue-material framework

I am attempting to create a four row layout with each row containing two columns using the vue-material framework.

The layout should be responsive

The columns should stack on each other when the viewport size is equal to or less than 600px.

The columns should have a normal layout like this :

Image when not stacked.

This content is not stacking when I reduce the screen size.

Code using vue material

This is the code | HTML

<div id="app">

  <div class="edit">

    <h1 class="md-display-3">Connect to be more</h1>
    <h2 class="md-subhead">Always be aware of the state of your business </h2>

  </div>

  <div id="canvas">

    <md-layout md-row md-columns id="rightColumn">

      <md-layout md-column>
        <h1 class="" id="entitle">Connect soft documents</h1>
      </md-layout>

        <md-layout md-column>
        <h1 class="" id="entitle">Connect soft documents</h1>
      </md-layout>


    </md-layout>

  </div>



</div>

This is the code | CSS

.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;
}