Why I need to write col-xs-12 if I want full column width on mobile with Flexbox grid?

[smajl]

In v3, every column class (if not specified otherwise with col-xs-? class) was breaking to full width on mobile. In v4 Flexbox version I need to write col-xs-12 manually everywhere to achieve the same thing. Is this by design or bug?

[matt-hernandez]

It isn't so much with mobile, so much as whenever the screen falls beneath any breakpoint in v3, if there isn't a .col-* class to handle sizing at that point, the columns break to full width. This is because the styling for the width and float disappear at that breakpoint, and the <div> elements snap to their default browser width, which is 100%.

With flex, <div> elements don't break to 100%, and instead behave more like inline-block.

Would it be possible to have flex-basis:100% in the .col-* classes? This could be easier to do if #17228 is implemented.

If not, then @smajl you may have to put col-xs-12 everywhere.

[smajl]

@matt-hernandez Yeah, I know, with "mobile" I was referring to resolutions <34em rather then to physical device. :) This was not so clear.

Thanks for the explanation of the problem. The "parent" .col class could be the easiest way of solving this in flex grid system. Till then, I'll use my own helper class until the #17228 is decided:

@if $enable-flex {
  @include media-breakpoint-down(xs) {
    .col {
      flex-basis: 100%;
    }
  }
}

[tnoetzel]

+1 to adding flex-basis: 100% on the .col-* classes.

However, given that this issue also happens at the sm, md, and even lg breakpoints (assuming you use xl), I went with a simpler helper class than @smalj suggested, which handles all those cases and doesn't depend on the .col class:

 [class*="col-"] {
    flex-basis: 100%;
}

[mdo]

Resolved with #17603, which adds auto layout to flexbox grid cols.

[mdo]

Actually, this wasn't "resolved", but the grid behavior has changed and you need the default .col-xs-12 on xs viewports. See #19099 for more details.