Bootstrap 4におけるグリッドシステムCSSにおけるcol-sm-*col-md-*col-lg-*の意味と、col-xs-*col-sm-*col-md-*col-lg-*の意味を同時に有する場合

Bootstrap--Gridにおけるcol-sm-*col-md-*col-lg-*col-xl-*の意味によると:
.cl-sm-*小画面携帯電話(≧576 px)
.cl-md-*ミッドプレーン(≧768 px)
.co l-lg-*大画面デスクトップディスプレイ(≧992 px)
.co l-xl-*超大スクリーン大デスクトップディスプレイ(≧1200 px)
説明:
1.col-列;-*占列を表す、すなわちrowごとに12列のグリッドシステム比を自動的に分ける.
2.sm-small小;md-medium中等;lg-largeが大きい.xl-Extra large超大.
3.グリッドシステムは、rowごとに自動的に12列に分ける、col-sm-*アスタリスクが表すパラメータは、現在の画面におけるdivが占める列数を表す.
例えば、このdivは小画面で6列(2つのdivを置く)を占めていますが、中画面で3列(4つのdivを置く)を占めています.小画面に4つのdivを並べて表示する必要がある場合はcol-sm-3です.レイアウトの問題を解決するのに役立ちます.
4.ケース:

     <div class="row">
         // row  12 ，  div  3 ，           4 div
         <div class="col-sm-3">div>
         <div class="col-sm-3">div>
         <div class="col-sm-3">div>
         <div class="col-sm-3">div>
     div>

5. .col-sm-* .col-md-* .col-lg-* .col-xl-*ブレンドは、異なる画面サイズでレイアウト効果を変更することを意味します.

     <div class="row">
         // row  12 ，          ，       ，                  div  9 ，       6 ，      3 .
         <div class="col-sm-9 col-md-6 col-lg-3">div>
     div>

6.   .colの使い方:flexboxのグリッドを自動的にレイアウトすることは、列の幅を1つだけ設定して、並んでいる他の列を自動的にサイズ変更することもできます.

     <div class="row">
         // row  12 ，        5/12，         7/12
         <div class="col">div>
         <div class="col-5">  5/12div>
         <div class="col">div>
     div>