ウィンドウ幅を変えてください。列の折り返しが変わります。Bootstrapのグリッドは常に12分割で、指定するのは「この画面幅のとき、12のうちいくつ使うか」だけです。
| 接頭辞 | 最小幅 | だいたいの端末 |
|---|---|---|
| （なし） | 0px | スマートフォン縦 |
| sm | 576px | スマートフォン横 |
| md | 768px | タブレット縦 |
| lg | 992px | ノートPC |
| xl | 1200px | デスクトップ |
| xxl | 1400px | 大型ディスプレイ |
すべて min-width で効きます。つまり「その幅以上」に適用され、大きいほうへ引き継がれます。だからクラスは小さい画面から順に書きます。