Eu sou novo no AngularJS, portanto, tenha paciência comigo. estou a usarDesign de material angular e tenho dificuldades em identificar uma maneira de executar grades responsivas com eficiência.

Por favor, veja meus comentários no código abaixo:

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

Mas alterar os valores flexíveis acima de"flex=66" e"flex=32" simplesmenteflex e flex, me dá o resultado desejado em dispositivos móveis, no entanto, como você saberia, em computadores, em vez da proporção 2: 1 ocupar metade e meia.

Por favor, veja também as imagens em anexo.

Esperado

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

Como é

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

Então, estou procurando uma maneira de alterar o valor flexível para telas menores (para quandolayout-sm é aplicado - alterarflex=66 paraflex=100)