Documentation - Auto-layout columns vs col-{breakpoint}-auto

Created by: Hube2

Hopefully I'm doing this right, first time here, feel free to yell at me if I'm doing something wrong. I did my best to search for anything similar.

I personally think that there can be some confusion over the difference between auto layout of columns and using the col-{breakpoint}-auto for variable width content. I actually had to read that part of the documentation several times before I really understood the difference.

For example, this will create 3 columns that are each ~33% width on sm

<div class="row">
    <div class="col-sm">
      1 of 3
    </div>
    <div class="col-sm">
      2 of 3
    </div>
    <div class="col-sm">
      3 of 3
    </div>
</div>

but this will create 3 columns where the first and last are the same size (~33%) and the middle column will resize based on the content, unless I have it wrong.

<div class="row">
    <div class="col-sm">
      1 of 3
    </div>
    <div class="col-sm-auto">
      Variable width content
    </div>
    <div class="col-sm">
      3 of 3
    </div>
</div>

I think it may be the use of the -auto modifier because this is referring to auto size based on the natural content width. Like I said, It took me several reading to figure out why there is a difference and I think that it needs to be clarified better in the documentation. Again, unless I'm still confused.

~JH