PR Checklist

Please check that your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added or this is not a bug fix / enhancement
• Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number:
#11466

.layout-column > .flex-##, .layout-row > .flex-## Exists for numeric flex values, but do not for non-numeric flex values, (grow, auto, ect). This means that using a numeric flex value with a non-numeric flex value with a gt/sm/xs prefix will only render the numeric one, even if the media rules should prefer the non-numeric one.

<div layout="row">
 <div layout="column" flex="100" flex-gt-sm="auto">
 <!-- will always be [flex="100"], even when gt-sm is true -->
 </div>
</div>

What is the new behavior?

Add more specific rules to the non-numeric mixins,
.layout-row/column > .#{$flexName}-nogrow/initial/auto/noshrink/grow/none.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information