Конструкция сетки материалов не работает

Question

У меня проблема с сеткой материалов на среднем экране. Тот же самый код работает хорошо с начальной загрузки:

В случае материала:

http://codepen.io/lampt2509/pen/egdZxp

<div class="container"> 
    <div class="mdl-grid"> 
     <div class="mdl-cell mdl-cell--4-col"></div> 
     <div class="mdl-cell mdl-cell--8-col"></div> 
    </div> 
</div> 

.mdl-cell { 
    height: 100px; 
} 

.mdl-cell:nth-child(1) { 
    background: red; 
} 

.mdl-cell:nth-child(2) { 
    background: blue; 
} 

с начальной загрузки:

http://codepen.io/lampt2509/pen/VPKaRr

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4"></div> 
    <div class="col-md-8"></div> 
    </div> 
</div> 

.row > div { 
    height: 100px; 
} 

.row > div:nth-child(1) { 
    background: red; 
} 

.row > div:nth-child(2) { 
    background: blue; 
} 

Любые идеи? Благодаря !

Answer 1

Я не заметил следующую строку в документе материала. Он отличается от бутстрапа.

Сетка имеет 12 столбцов в размер экрана рабочего стола, 8 размера таблетки, и 4 в размере телефона

Так классы клеток передаются должны стать:

<div class="mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--1-col-phone"></div> 
<div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-tablet mdl-cell--3-col-phone"></div> 

http://codepen.io/lampt2509/pen/BpLzNb

И это работает.