What is the purpose of using multiple bootstrap column sizes?

Question

I'm fairly new to Bootstrap, and I understand how Bootstrap uses a 12-column grid. When I want to make utilize a Bootstrap grid, I traditionally do it like this:

<div class="row">
    <div class="col-md-6">
    ...
    </div>
    <div class="col-md-6">
     ...
    </div>
</div>

I also understand that different column sizes are used for different screen sizes

<div class="row">
    <div class="col-xs-6">
    ...
    </div>
    <div class="col-xs-6">
    ...
    </div>
</div>

However, I've seen a lot of people do something similar to this:

<div class="row">
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
</div>

Why use multiple column sizes? Will the browser detect which one is appropriate to use?

Answer 1

There is absolutely no reason to have all three classes in this example:

<div class="row">
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
</div>

It is effectively the same as this:

<div class="row">
    <div class="col-xs-6">
    ...
    </div>
    <div class="col-xs-6">
    ...
    </div>
</div>

Bootstrap grid classes work on all sizes above the size specified, so applying col-xs-6 will cause that element to also contain 6 columns on any larger screen sizes, like sm, md, etc. I'm guessing that whoever is including all three classes in the first example does not have a firm understanding of how the Bootstrap grid system works.

You only need to include multiple classes if you want the element to be a different size on different screen sizes:

<div class="row">
    <div class="col-xs-4 col-md-3 col-lg-2">
    ...
    </div>
    <div class="col-xs-8 col-md-9 col-lg-10">
    ...
    </div>
</div>