Vuetify中v-row内v-col小屏幕下无法自动换行如何解决

我编写了如下结构的v-row组件：

<v-row class="mt-3 d-flex flex-wrap">
    <v-col cols="4">
        <v-text-field
            v-model="search"
            placeholder="Suche"
            filled
            rounded
            dense
            width="50"
            prepend-inner-icon="mdi-magnify"
        >
        </v-text-field>
    </v-col>
    <v-col cols="3">
        <v-menu
            ref="menu1"
            v-model="menu1"
            :close-on-content-click="false"
            transition="scale-transition"
            offset-y
            max-width="290px"
            min-width="auto"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                    v-model="BeginDate"
                    label="Startdatum"
                    persistent-hint
                    prepend-icon="mdi-calendar"
                    v-bind="attrs"
                    color="primary"
                    v-on="on"
                >
                </v-text-field>
            </template>
            <v-date-picker
                color="primary"
                v-model="BeginDate"
                no-title
                @input="menu1 = false"
            >
            </v-date-picker>
        </v-menu>
    </v-col>
    <v-col cols="3">
        <v-menu
            ref="menu2"
            v-model="menu2"
            :close-on-content-click="false"
            transition="scale-transition"
            offset-y
            max-width="290px"
            min-width="auto"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                    v-model="EndDate"
                    label="Enddatum"
                    persistent-hint
                    prepend-icon="mdi-calendar"
                    v-bind="attrs"
                    color="primary"
                    v-on="on"
                >
                </v-text-field>
            </template>
            <v-date-picker
                color="primary"
                v-model="EndDate"
                no-title
                @input="menu2 = false"
            >
            </v-date-picker>
        </v-menu>
    </v-col>
    <v-col cols="1">
        <v-btn
            @click="DateFilter()"
            color="primary"
        >
            Apply
        </v-btn>
    </v-col>
    <v-col cols="1">
        <v-btn
            @click="DateFilterReset()"
            color="red"
            class="white--text"
        >
            Reset
        </v-btn>
    </v-col>
</v-row>

桌面端访问时布局显示正常，效果如下：

小屏幕尺寸设备访问时，列无法自动换行，效果如下：

已尝试给v-row添加d-flex和flex-wrap类，查阅Vuetify官方文档未找到有效解决方案，需要确认给v-row应用什么类可以实现小屏幕下列自动换行。

d-flex和flex-wrap属于冗余类，v-row组件默认就内置了display: flex和flex-wrap: wrap样式，添加这两个类无法解决换行问题。
核心原因：为v-col设置的无断点前缀cols属性会在所有屏幕尺寸下生效，当前5个v-col的宽度总和为4+3+3+1+1=12，刚好占满整行12栅格，哪怕在最小屏的xs断点下，所有列也会被强制压缩在同一行，不会触发换行。

要实现小屏自动换行，不需要给v-row加额外类，只需要给v-col配置响应式断点宽度即可，参考改法：

<!-- 移除冗余的d-flex flex-wrap类 -->
<v-row class="mt-3">
    <!-- 搜索框：md及以上断点占4列，md以下占满12列 -->
    <v-col cols="12" md="4">
        <v-text-field
            v-model="search"
            placeholder="Suche"
            filled
            rounded
            dense
            prepend-inner-icon="mdi-magnify"
        >
        </v-text-field>
    </v-col>
    <!-- 开始日期选择：md及以上占3列，sm断点占6列，xs占12列 -->
    <v-col cols="12" sm="6" md="3">
        <v-menu
            ref="menu1"
            v-model="menu1"
            :close-on-content-click="false"
            transition="scale-transition"
            offset-y
            max-width="290px"
            min-width="auto"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                    v-model="BeginDate"
                    label="Startdatum"
                    persistent-hint
                    prepend-icon="mdi-calendar"
                    v-bind="attrs"
                    color="primary"
                    v-on="on"
                >
                </v-text-field>
            </template>
            <v-date-picker
                color="primary"
                v-model="BeginDate"
                no-title
                @input="menu1 = false"
            >
            </v-date-picker>
        </v-menu>
    </v-col>
    <!-- 结束日期选择：宽度规则同开始日期 -->
    <v-col cols="12" sm="6" md="3">
        <v-menu
            ref="menu2"
            v-model="menu2"
            :close-on-content-click="false"
            transition="scale-transition"
            offset-y
            max-width="290px"
            min-width="auto"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                    v-model="EndDate"
                    label="Enddatum"
                    persistent-hint
                    prepend-icon="mdi-calendar"
                    v-bind="attrs"
                    color="primary"
                    v-on="on"
                >
                </v-text-field>
            </template>
            <v-date-picker
                color="primary"
                v-model="EndDate"
                no-title
                @input="menu2 = false"
            >
            </v-date-picker>
        </v-menu>
    </v-col>
    <!-- 筛选按钮：md及以上占1列，sm断点占6列，xs占12列 -->
    <v-col cols="12" sm="6" md="1">
        <v-btn
            @click="DateFilter()"
            color="primary"
        >
            Apply
        </v-btn>
    </v-col>
    <!-- 重置按钮：宽度规则同筛选按钮 -->
    <v-col cols="12" sm="6" md="1">
        <v-btn
            @click="DateFilterReset()"
            color="red"
            class="white--text"
        >
            Reset
        </v-btn>
    </v-col>
</v-row>

补充说明：

• Vuetify栅格体系从窄到宽共5个默认断点：xs（<600px）、sm（600-960px）、md（960-1264px）、lg（1264-1904px）、xl（>1904px）
• 无前缀的cols属性配置的是最小断点（xs）下的列宽，同一行内所有v-col宽度总和超过12时才会自动折行
• 原搜索框上配置的width="50"是无效属性，v-text-field宽度完全由外层v-col控制，该属性可以直接删除

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