如何在Ant Design表单中实现响应式布局？

在使用蚂蚁设计形式时，我在响应能力方面存在严重问题。

import { From, Input, Button } from 'antd'
const { Item } = Form;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const ExampleAntForm = () => {
{

   return (
      <Form {...layout}>
          <Item label="Name" name="username"> <Input type="text"/> </Item>
          <Item label="Password" name="password"> <Input type="password"/> </Item>
          <Item {...tailLayout}>
              <Button htmlType="submit" type="primary"> Submit </Button>
          </Item>
      </Form>
   )
}

但是在这种情况下，我想根据屏幕尺寸应用布局。

理想的情况如下

const layout = {
   labelCol = { span: { sm: 24, md: 8, lg: 6 }}
   wrapperCol = { span: { sm: 24, md: 16, lg: 12 }}
}

如何使用layout蚂蚁设计Form组件中的道具来应对这种响应？Orr只是让我知道其他解决我问题的方法。