Я новичок в AngularJS, поэтому, пожалуйста, потерпите меня. я используюУгловой дизайн материала и я испытываю трудности в определении способа эффективного выполнения адаптивных сеток.

Пожалуйста, смотрите мои комментарии в коде ниже:

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

Но изменяя вышеуказанные значения flex от"flex=66" а также"flex=32" простоflex и flex, дает мне желаемый результат в мобильных устройствах, однако, как вы, наверное, знаете, в настольных компьютерах вместо соотношения 2: 1 занимает половину и половину.

Пожалуйста, смотрите также прикрепленные изображения.

ожидаемый

занятый кот http://dev.sprintu.com/imgHelp/final1.png

Как это

занятый кот http://dev.sprintu.com/imgHelp/final2.png

Поэтому я ищу способ изменить значение изгиба для небольших экранов (когдаlayout-sm применяется - изменитьflex=66 вflex=100).