Javascript 如何在vuetify中创建响应性布局？

在GoogleMaterialFramework中，我有以下代码

        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_date_from.type" :label="page.text_input_date_from.label" box autofocus :append-icon="page.text_input_date_from.icon" v-model="page.text_input_date_from.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_date_to.type" :label="page.text_input_date_to.label" box autofocus :append-icon="page.text_input_date_to.icon" v-model="page.text_input_date_to.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_person_name.type" :label="page.text_input_person_name.label" box autofocus :append-icon="page.text_input_person_name.icon" v-model="page.text_input_person_name.value"></v-text-field>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone">
            <v-text-field :type="page.text_input_company_name.type" :label="page.text_input_company_name.label" box autofocus :append-icon="page.text_input_company_name.icon" v-model="page.text_input_company_name.value"></v-text-field>
        </div>

如何使用vuetify复制相同的内容

我看不到任何反应灵敏的例子

感谢您在文档页面：

它包含5种类型的媒体断点，用于确定特定的屏幕大小或方向。网格组件的道具实际上是从其定义的属性派生的类

这意味着传递给v-col组件的道具为网格元素定义了响应类

如果转到同一页面上的API部分并从组件的select中选择v-col，则第一个可用的属性：{size}={1-12}列出了可能的值，以指定每个断点的布局：

xs：非常小， sm：小， 医学博士：中等， lg：大型， xl：特大号

它们与值1到12一起使用

用法示例：

<v-col 
  xs="12" 
  sm="5" 
  md="3"
>
  <v-card dark color="primary">
    ...
  </v-card>
</v-col>

确保检查v-col文件，了解网格工作所需的布局结构

<v-col 
  xs="12" 
  sm="5" 
  md="3"
>
  <v-card dark color="primary">
    ...
  </v-card>
</v-col>