Spacing Between Rows with Materialize CSS

Answer 1

I fixed that providing a fixed height to the .cols on the larger screen. If your .col height can be fixed (probably use any other class and fix them or the larger screen or the screen where this problem is caused, which I am sure the medium col is effected the most.).

Here is a snippet which worked for me when there are multiple .col than a 12 grid row can attach to it:

.container {
  padding: 2.4em;
}

.container .row .col.m4 {
  margin-top: 3em;
  height: 42em; //put your required height which fix this by testing.
  width: 33%;
}  


@media screen and (min-width:10px) and (max-width: 640px){
  .container {
    padding: .5em;
  }
  .container .row .col.s12 {
    width: 100%;
    /*height: 45em;*/ We don't need that to be fixed in small devices
  }
}

.container .row {
  margin-top: 1.2em;
}

For your solution, it was simply that you need to put all the .cols in one row, as .row kind of forces the next line. And it is obvious that one row would need to fill it's .row capacity, so it was good fixed by your self.