Web制作で、Bootstrapを使用している方はご存知かと思いますが、Bootstrap3は3つのブレイクポイントが用意されており、4つの区間（grid tier）が存在していました。詳細は下記の通りです。
■Bootstrap3のブレイクポイントと区間
xs：767px以下
sm：768px以上991px以下
md：992px以上1199px以下
lg：1200px以上
このような構成となっていた為、スマホは767px以下という事で、xs区間を使用してデザインしていたかと思います。ところが、Bootstrap4では、このスマホ表示部分のブレイクポイントにおいて、大きな変更がありました。
Bootstrap4では下記のように5つの区間が用意され、新たに追加された「xl」以外については、それぞれの区間名自体はBoostrap3と同じなのですが、同じ区間名でもそれを指し示す領域が異なっているのがわかります。
■Bootstrap4のブレイクポイントと区間
xs：575px以下
sm：576px以上767px以下
md：768px以上991px以下
lg：992px以上1199px以下
xl：1200px以上
具体的には、新たに追加された「xl」区間が指し示す領域は1200px以上の範囲で、Bootstrap3では「lg」として扱われていた領域になります。Bootstrap4では「lg」は、992px以上1199px以下の領域が対象となり、ひとつサイズがズレている事に気付くかと思います。同じような流れで、「md」、「sm」も変更になっており、Bootstrap4で新たに追加されたブレイクポイント（576px）が存在する事で、「xs」は、575px以下を指し示す事になります。
つまりBootstrap3の記述に慣れている方は、同じ考えでBootstrap4を使用して区間指定をすると思わぬ表示に戸惑うことがあるかと思います。わざわざ同じ区間名で表示領域をズラすというのは混乱しやすいと思うのですが、決まってしまった事は仕方ないので、Bootstrap4の記述に徐々に慣れていく必要がありますね。
Bootstrap4のブレイクポイントの詳細は下記のページにわかりやすく記載されています。
■参考サイト
http://qiita.com
今やWeb制作には欠かせないと言っても過言ではないBootstrap。常に進化していきますので、新しい技術に乗り遅れないようにしっかり対応していきたいものです。