Ich bin neu bei AngularJS. Ich benutzeAngular Material Design und ich habe Schwierigkeiten, einen Weg zu finden, um reaktionsschnelle Grids effizient zu realisieren.

Bitte sehen Sie meine Kommentare im Code unten:

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

Aber Ändern der obigen Flex-Werte von"flex=66" und"flex=32" zu einfachflex und Flex, gibt mir das gewünschte Ergebnis bei Mobilgeräten, aber wie Sie wissen würden, bei Desktop, anstelle des 2: 1-Verhältnisses, das halb und halb belegt.

Bitte sehen Sie auch die angehängten Bilder.

Erwarte

eine beschäftigte Katze http://dev.sprintu.com/imgHelp/final1.pn

Wie es is

eine beschäftigte Katze http://dev.sprintu.com/imgHelp/final2.pn

So bin ich auf der Suche nach einer Möglichkeit, den Flex-Wert für kleinere Bildschirme zu ändern (wennlayout-sm wird angewendet - @ ändeflex=66 zuflex=100).