css - bootstrap 在某些断点处改变 flex 方向？

Question

我正在使用 bootstrap 4，我有一个 div，它有 d-flex，它应该在“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

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

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

这行得通