Soy nuevo en AngularJS, así que tengan paciencia conmigo. Estoy usandoDiseño de material angular y tengo dificultades para identificar una forma de hacer cuadrículas receptivas de manera eficiente.

Por favor vea mis comentarios en el siguiente código:

    <div layout="row">
<div layout="row" flex="75" layout-sm="column" class="ptn-info-grid" layout-margin> <!-- USING ROW FOR DESKTOP AND COLUMN FOR MOBILE DEVICES -->

    <div layout="column" flex="66"> <!-- I want this div occupy 2/3 of screen in Desktop but change to 100 in mobile devices (but stays in 66) -->


        <div layout="row" layout-sm="column">
            <div class="ptn-info-grid-item" flex>1</div>
            <div class="ptn-info-grid-item" flex>2</div>
        </div>

        <div layout="row" layout-sm="column">
            <div class="ptn-info-grid-item" flex>3</div>
            <div class="ptn-info-grid-item" flex>4</div>
        </div>

    </div>

    <div layout="column" flex="32"> <!-- I want this div occupy 1/3 of screen in Desktop but change to 100(which actually happens) in mobile devices. Im not using 33 because while using margin for child elements this div goes out of the parent div a little. -->
        <div class="ptn-info-grid-item" flex style="margin-left: 0px;">Right Long
        </div>
    </div>

</div>
<div layout="row" flex="25" id="customer-phone-img"></div>

Pero cambiando los valores flexibles anteriores de"flex=66" y"flex=32" simplementeflex y flex, me da el resultado deseado en dispositivos móviles, sin embargo, como sabrán, en el escritorio, en lugar de la relación 2: 1, ocupa la mitad y la mitad.

Por favor, vea también las imágenes adjuntas.

Esperado

un gato ocupado http://dev.sprintu.com/imgHelp/final1.png

Como es

un gato ocupado http://dev.sprintu.com/imgHelp/final2.png

Así que estoy buscando una manera de cambiar el valor flexible para pantallas más pequeñas (para cuandolayout-sm se aplica - cambioflex=66 aflex=100)