Ответ 1
Основной смысл в том, что различные итерации класса .col позволяют указать поведение сетки для разных устройств (телефонов, планшетов, настольных компьютеров). Итак, в примере, который вы спрашиваете о .col-lg-8, указано, что div должен занимать 8 столбцов на рабочем столе, а .col-12 указывает, что div должен занимать 12 столбцов (вся строка) на мобильном устройстве. Этот уровень специфичности дает вам точный контроль над тем, как ваш контент будет размещаться на разных размерах экрана таким образом, который не был таким простым с помощью Bootstrap 2.
В общем, я нашел лучший способ понять, что на практике это означает, чтобы привести примеры страниц на разных типах устройств или изменить размер окна браузера и просто сравнить результаты.
Кроме того, как указано в комментариях к вашему вопросу, идея перехода с Bootstrap 2 на 3 не обязательно является целью. Вы можете попытаться сделать это, обновив существующие классы .span* до новых классов .col-*, но есть и другие соображения, как то, что ваш существующий проект является фиксированной шириной или жидкостью, что может вызвать проблемы с этим. Есть много других изменений между двумя версиями вне макета сетки, которые также могут дать вам проблемы.