Vuetify wrap v-columns - vue.js

Question

I have a v-row that is built like this:
<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>
On the website if you visit it on Desktop it looks perfectly fine:
But if you go on the Site on a device with a smaller screen size, the columns aren´t wrapping.
Does anyone know the classes i need to apply to the v-row. I have already tried 'd-flex' and 'flex-wrap'. I didn´t find any more helpful on the vuetify website either. Thanks in advance

Answer 1

The cols attribute define the col width for all viewports. To set a different col width in small viewport you should use the xs or sm attributes. For ex:
<v-col cols="4" xs="12" sm="6"></v-col>