How to properly inject responsive classes for Bootstrap grid?

Question

css

Why does the Bootstrap site have classes named span4 or span8 in the samples, but on production projects they use the names col-md-4 or col-xs-4 or sm or lg? I understand that these classes apply to screens of different widths. From the smallest to the largest.
From which class is it correct to start writing from the smallest xs or the largest lg?
Please answer both questions.

Answer 1

spanX - used in version 2, col-x in version 3
getbootstrap.com/css

Answer 2

You need to proceed from the requirements of the layout. In general, the bootstrap itself advises starting with mobile first, but it’s more convenient for me to rivet from large sizes. I hope that the logic of the columns is clear to you and you have no questions about this. The spans have a difference in versions.