flex-md and other flex-* media query directives not overriding properly

[denver-HJS]

Actual Behavior:

• The flex media query for "flex-md" is being applied when the viewport is less than 960px wide
• The flex-sm and/or flex-xs CSS classes should override the flex-md values

CodePen (or steps to reproduce the issue): *

• http://codepen.io/denver-bohling/pen/VKLbBj
• Tags of interest are:

<div class="status-container" flex="35" flex-md="45" flex-sm="100" flex-xs="100">
...
<div flex="65" flex-md="55" flex-sm="100" flex-xs="100">

• An image of the behavior using Chrome's DevTools emulator is attached

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: 1.1.0

Additional Information:

• Browser Type: Chrome/Webkit browsers
• OS: Windows7 & iOS 9.3.5
  

[denver-HJS]

Additional info about this:

It behaves as expected in codepen's "full" view, but still has the issue explained above in the "editor" view. My deployed page is exhibiting the same behavior as codepen's editor view. I'm not sure what's creating the difference.

[ThomasBurleson]

@denver-HJS - We will investigate. Layouts v2 implementation is currently in-progress and should address these issues nicely.