Поясните в чём разница между xs, sm, md, lg в определении колонок?

Читаю на одном из сайтов ( https://itchief.ru/lessons/bootstrap-3/22-the-grid-system-twitter-bootstrap-3):
"... Кроме указания ширины адаптивному блоку необходимо ещё указать и класс УСТРОЙСТВА (вместо 1 вопроса). Класс устройства будет определять то, на каком viewport будет действовать эта ширина. В Bootstrap 3 различают 4 основных класса. Это xs, sm (ширина viewport >= 768px), md (ширина viewport >= 992px) и lg (ширина области просмотра браузера >=1200px)."
И ещё:
"... Например, адаптивный блок с классом col-xs-6 col-lg-3 будет иметь на УСТРОЙСТВАХ xs, sm и md ширину 50% (6/12), на lg - 25% (3/12)."

Я, как создатель сайта, откуда могу знать на каком УСТРОЙСТВЕ будут его просматривать: десктоп ( с размером экрана 21"), ноутбук, планшет или, наконец, смартфон с экраном 7" ?
Что я должен писать в коде? - Не врубаюсь!
С уважением ВВГ

PS: Вижу, что, например, при заходе на Яндекс с десктопа и со смартфона имеется резкое различие по внешнему виду, то есть, это фактически два разных сайта.

skyANA,

Мне вполне понятна общая идея, непонятно как её реализовать. Что в коде-то писать из этих 4 вариантов? Или исходя из значения viewport пользователя должны быть в коде запрограммированы все 4 варианта по примерно такому принципу?

Если viewport = 768px
Используй col-xs-?

Если viewport = 992px
Используй col-md-?

Если viewport = 1200px
Используй col-lg-?

Или это бред?!
С уважением ВВГ