ブートストラップ4でウィンドウの幅が減少した場合、上部コンテナの下に収まるようにコンテナをラップする方法は？

Question

私はブートストラップ4に新しく、ブートストラップ3にもあまり取り組んでいません。

div（s）にクラスcol-（ブレークポイント） - （span）を割り当てると、それらは自動的に1行に配置されず、ウィンドウの幅に合わせて調整されません。互いに積み重ねられている。だから私はCSS フレックスプロパティを親コンテナに割り当て、それはそのトリックを行います。

ウィンドウサイズに従ってこれらのラップを作成するには、ブートストラップ4グリッドシステムに従ってクラスを割り当てますが、コンテナを次の行にラップするわけではありません。代わりにフレックスアイテムの幅を合わせてウィンドウの幅を超え、横方向（x軸）スクロールが可能になります。

私が望むのは、最初の2つのコンテナが1つの行に残っていて、最後の2つが画面幅の小さい別の行にラップすることです（電話肖像画< 576px）。

<div style="display:flex;"> 
    <div class="col-sm-3 col-6"></div> 
    <div class="col-sm-3 col-6"></div> 
    <div class="col-sm-3 col-6"></div> 
    <div class="col-sm-3 col-6"></div> 
</div> 

どこが間違っていますか？

Answer 1

contaisがflex = "行"を追加してスタイル属性を削除し、子divがこのクラス= "col-lg-3 col-md-3 col-6"

Answer 2

使用するすべてのnecesarryグリッドクラス、ドキュメントはhttps://getbootstrap.com/docs/4.0/layout/grid/

あなただけの提案は、まず[ドキュメントを読んで、コンテナ内のすべての行のCOLSと行（.containerまたは.container-fluid）

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-3 col-6">x</div> 
    <div class="col-sm-3 col-6">y</div> 
    <div class="col-sm-3 col-6">z</div> 
    <div class="col-sm-3 col-6">a</div> 
    </div> 
</div>