Having difficulty creating a Grid layout using vue-material framework

Question

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

Answer 1

Here is how you can do it.

Vue.use(VueMaterial)

Vue.config.productionTip = false

new Vue({
  el: '#app',
})

@import url('https://cdnjs.cloudflare.com/ajax/libs/vue-material/0.7.4/vue-material.css');


#container > .md-layout {
  background-color: white;
  min-height: 100px;
  border-color: black;
  align-items: center;
  justify-content: center;
  /*border-style: dotted;*/
  border-width: 1px;
  padding: 8px;
}

body {
  background: #eee;
}

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-material/0.7.4/vue-material.js"></script>


<div id="app">
  <md-layout id="container">
    
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
      1
    </md-layout>
    
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50" md-flex-large="50" md-flex-xlarge="50">
      2
    </md-layout>
    
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50" md-flex-large="50" md-flex-xlarge="50">
      3
    </md-layout>
    
    
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      4
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      5
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      6
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="25" md-flex-large="25" md-flex-xlarge="25">
      7
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="66" md-flex-large="66" md-flex-xlarge="66">
      8
    </md-layout>
    
    <md-layout md-flex-xsmall="50" md-flex-small="50" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">
      9
    </md-layout>
    
  </md-layout>
</div>