// Auto width
@include -zf-each-breakpoint() {
- .grid-x > [class*="#{$-zf-size}-"] {
+ .grid-x > [class*="#{$-zf-size}-"]:not([class*="#{$-zf-size}-order"]):not([class*="#{$-zf-size}-offset"]) {
flex-basis: auto;
}
@if not($-zf-size == small) {
@include -zf-each-breakpoint() {
- > [class*="#{$-zf-size}-"] {
+ > [class*="#{$-zf-size}-"]:not([class*="#{$-zf-size}-order"]):not([class*="#{$-zf-size}-offset"]) {
flex-basis: auto;
}
<h3>Here's my footer</h3>
</div>
</div>
-
+
+ <h3>Test case from <a href="https://github.com/zurb/foundation-sites/issues/10141#issuecomment-308679657">Issue #10141</a></h3>
+ <div class="grid-x grid-padding-x grid-demo">
+ <div class="small-4 medium-4 large-4 cell">
+ <div class="grid-x grid-padding-x grid-padding-y align-middle">
+ <div class="shrink cell small-order-2 medium-order-2 large-order-1">
+ <img src="http://lorempixel.com/75/75/nature" alt="">
+ </div>
+ <div class="auto cell small-order-1 medium-order-1 large-order-2">
+ <h2>source second</h2>
+ <p>This should wrap around nicely... but seems to don't when there's a longer text...</p>
+ </div>
+ </div>
+ </div>
+ <div class="small-8 medium-8 large-8 cell">
+ <h1>filler</h1>
+ </div>
+ </div>
+
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>