我是新来的AngularJS所以请承担与我。我使用
Angular Material Design，我有困难，在确定一种方式高效地做响应网格。
请在下面的代码中看到我的意见：
<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：一半和一半。
请参见附图。
预期
a busy cat http://dev.sprintu.com/imgHelp/final1.png
怎么回事
a busy cat http://dev.sprintu.com/imgHelp/final2.png
所以我正在寻找一种方法来改变较小屏幕的flex值(当应用layout-sm时 – 将flex = 66改为flex = 100)。
在这里查看“响应式Flex& Offset属性”部分：
https://material.angularjs.org/#/layout/options
基本上，您可以使用以下选项：
> flex – 设置所有的flex。
> flex-sm – 在宽度小于600像素的设备上设置flex。
> flex-gt-sm – 在大于600px宽的设备上设置flex。
> flex-md – 将设备上的flex设置为600px到960px宽。
> flex-gt-md – 在大于960px宽的设备上设置flex。
> flex-lg – 在设备上在960px和1200px之间设置flex。
> flex-gt-lg – 在宽度大于1200像素的设备上设置flex。
所以改变你的：
<div layout="column" flex="66">
至
<div layout="column" flex-gt-sm="66">
而且div只会在大于小(移动)时使用66的宽度，
