i just wanted you to look at the specific things i linked to, but reading the documentation is fine as well.
Well, bootstrap (which use to build your grid system) uses
@media query's, to allows different columns for different screen widths.
Well, you can always scroll to the top, and start there? You know what bootstrap is, right? It is a css file, which you can use to build your html pages faster.
But your media query is different.
(min-width: @screen-md-min) media querys are in the bootstrap css file, your media query is in your css file. You can have multiply media query's. Media query's allow you to have different css, for different screen widths.
bootstrap uses a bunch of media querys to allow you to build your grid system in such a way, it also works smooth on mobile. You can stick with col-md for know, but i thought: if look at the image of the different col-md's, might help you better understand it