Dra i webbläsarfönstrets kant för att göra fönstret smalare och bredare och se vad som händer

.col-xs-4
.col-xs-4
.col-xs-4

.col-xs-4 gör att kolumnen sträcker sig över 4/12 av containerns bredd oavsett skärmstorlek

.col-sm-4
.col-sm-4
.col-sm-4

.col-sm-4 gör att kolumnen sträcker sig över 4/12 av bredden om skärmen (webbläsarfönstret) är minst 768 pixlar bred. Är den smalare fyller den kolumnen hela containerns bredd.

.col-md-4
.col-md-4
.col-md-4

.col-md-4 gör att kolumnen sträcker sig över 4/12 av bredden om skärmen (webbläsarfönstret) är minst 992 pixlar bred. Är den smalare fyller den kolumnen hela containerns bredd.

.col-lg-4
.col-lg-4
.col-lg-4

.col-lg-4 gör att kolumnen sträcker sig över 4/12 av bredden om skärmen (webbläsarfönstret) är minst 1200 pixlar bred. Är den smalare fyller den kolumnen hela containerns bredd.

Man kan också ha olika inställningar för respektive kolumn utifrån skärmbredd

.col-xs-8 .col-sm-4
.col-xs-4

På skärmar som är smalare än 768 pixlar (xs) sträcker sig den gröna kolumnen över 8/12 och den gula döljs. På skärmar som är bredare än 768 pixlar (sm) syns alla tre kolumnerna över 4/12 vardera.

.col-xs-4
.col-sm-4 .col-xs-2
.col-xs-2 .visible-xs
.col-xs-4

På skärmar som är bredare än 768 pixlar (sm) syns tre lika breda kolumner. På skärmar som är smalare än 768 pixlar (xs) delas den gula kolumnen i en gul och en blå smalare kolumn.

.col-lg-4 .col-xs-6
.col-lg-4 .visible-lg
.col-lg-4 .col-xs-6

På skärmar som är minst 1200 pixlar breda (lg) syns tre kolumner. Om skärmen är smalare syns bara två.