Bootstrap响应式失效：flex-sm-column在Laravel Mix项目中不被识别

我正在开发一个基于Laravel Mix、Vue.js和Bootstrap 5.3的项目，遇到如下问题：

Laravel Mix配置 #

const mix = require("laravel-mix");
const path = require('path');

require("mix-env-file");
require("laravel-mix-workbox");

mix.js('resources/js/app.js', 'public/js')
   .version()
   .vue()
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps()

app.scss配置 #

@import "~bootstrap/dist/css/bootstrap";
... custom things

Vue.js元素代码 #

<div class="card unselectable" style="overflow: hidden;" v-if="ux.viewFilters">
    <div class="p-2">
        <div class="d-flex flex-row flex-sm-column flex-row gap-2">

问题详情 #

Bootstrap无法识别flex-sm-column这类响应式元素，DevTools中看不到该样式效果，但Laravel Mix编译生成的app.css中确实存在该样式。

内容的提问来源于stack exchange，提问作者thetreedev