引导程序在某些断点处更改 flex 方向？

Question

我正在使用引导程序 4，我有一个带有 d-flex 的 div，它应该在“lg”（屏幕 1200px 及更大）断点处显示方向行，并且当它在手机“sm”或“xs”上使用时将使用断点，它会显示方向列并表现得像一列，但无论我如何尝试，它始终保持一行

我试过

<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">

和

<div class="d-flex flex-xs-column flex-lg-row justify-content-lg-around">

但它不起作用..我误解了断点系统还是什么？我的意思是我会使用 CSS 媒体查询做同样的事情。

这是完整的代码

<div class="w-75 my-5 mx-auto">
                <h1 class=" text-center my-3">Awards won</h1>

                <div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
                    
                    <div class="d-flex flex-column col-sm-4 align-items-center">
                        <img src="./assets/award1.PNG" width="150" height="150" class="award-img">
                        <span> Award title </span>
                        <hr class="bg-dark w-50 m-0"/>
                        <span class="w-75 text-center text-break">Best cake made in 2019</span>
                    </div>

                    <div class="d-flex flex-column col-sm-4 align-items-center">
                        <img src="./assets/award2.PNG" width="150" height="150" class="award-img">
                        <span> Award title </span>
                        <hr class="bg-dark w-50 m-0"/>
                        <span class="w-75 text-center text-break">Winners of the national cake baking contest</span>
                    </div>

                    <div class="d-flex flex-column col-sm-4 align-items-center">
                        <img src="./assets/award3.PNG" width="150" height="150" class="award-img">
                        <span> Award title </span>
                        <hr class="bg-dark w-50 m-0"/>
                        <span class="w-75 text-center text-break">Most satisfied customers award</span>
                    </div>

                </div>
            </div>

Answer 1

解决了它，似乎引导程序通过在类实用程序中不包含断点值来处理 xs 断点

<div class="d-flex flex-column flex-lg-row justify-content-around">

这有效