From aa4606cd9f67b1435f47a2c14da2eaa0d221f659 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjycui@users.noreply.github.com>
Date: Wed, 15 Mar 2017 11:25:58 +0800
Subject: [PATCH] feat: make Form.Item work with responsive layout, ref: #5296
 (#5306)

---
 .../__tests__/__snapshots__/demo.test.js.snap | 90 +++++++++----------
 components/form/demo/dynamic-form-item.md     | 15 +++-
 components/form/demo/register.md              | 20 ++++-
 components/form/demo/time-related-controls.md | 15 +++-
 components/form/demo/validate-static.md       | 38 +++++---
 components/form/style/index.less              | 33 ++++++-
 6 files changed, 141 insertions(+), 70 deletions(-)

diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index fe7847fe0..b1a74e7d7 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -388,7 +388,7 @@ exports[`test renders ./components/form/demo/dynamic-form-item.md correctly 1`]
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-20 ant-col-offset-4 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4">
       <div
         class="ant-form-item-control ">
         <button
@@ -407,7 +407,7 @@ exports[`test renders ./components/form/demo/dynamic-form-item.md correctly 1`]
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-20 ant-col-offset-4 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4">
       <div
         class="ant-form-item-control ">
         <button
@@ -777,7 +777,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-6 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
       <label
         class="ant-form-item-required"
         for="email"
@@ -786,7 +786,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
       <div
         class="ant-form-item-control ">
         <input
@@ -801,7 +801,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-6 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
       <label
         class="ant-form-item-required"
         for="password"
@@ -810,7 +810,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
       <div
         class="ant-form-item-control ">
         <input
@@ -825,7 +825,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-6 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
       <label
         class="ant-form-item-required"
         for="confirm"
@@ -834,7 +834,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
       <div
         class="ant-form-item-control ">
         <input
@@ -849,7 +849,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-6 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
       <label
         class="ant-form-item-required"
         for="nickname"
@@ -862,7 +862,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
       <div
         class="ant-form-item-control ">
         <input
@@ -877,7 +877,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-6 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
       <label
         class="ant-form-item-required"
         for="residence"
@@ -886,7 +886,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
       <div
         class="ant-form-item-control has-success">
         <span
@@ -915,7 +915,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-6 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
       <label
         class="ant-form-item-required"
         for="phone"
@@ -924,7 +924,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
       <div
         class="ant-form-item-control ">
         <span
@@ -972,7 +972,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-6 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-6">
       <label
         class="ant-form-item-required"
         for="captcha"
@@ -981,7 +981,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col-14 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-14">
       <div
         class="ant-form-item-control ">
         <div
@@ -1020,7 +1020,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
     class="ant-row ant-form-item"
     style="margin-bottom:8px;">
     <div
-      class="ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-14 ant-col-sm-offset-6">
       <div
         class="ant-form-item-control ">
         <label
@@ -1046,7 +1046,7 @@ exports[`test renders ./components/form/demo/register.md correctly 1`] = `
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-14 ant-col-sm-offset-6">
       <div
         class="ant-form-item-control ">
         <button
@@ -1068,7 +1068,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-8 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
       <label
         class="ant-form-item-required"
         for="date-picker"
@@ -1077,7 +1077,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
       </label>
     </div>
     <div
-      class="ant-col-16 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
       <div
         class="ant-form-item-control ">
         <span
@@ -1098,7 +1098,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-8 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
       <label
         class="ant-form-item-required"
         for="date-time-picker"
@@ -1107,7 +1107,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
       </label>
     </div>
     <div
-      class="ant-col-16 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
       <div
         class="ant-form-item-control ">
         <span
@@ -1129,7 +1129,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-8 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
       <label
         class="ant-form-item-required"
         for="month-picker"
@@ -1138,7 +1138,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
       </label>
     </div>
     <div
-      class="ant-col-16 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
       <div
         class="ant-form-item-control ">
         <span
@@ -1159,7 +1159,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-8 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
       <label
         class="ant-form-item-required"
         for="range-picker"
@@ -1168,7 +1168,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
       </label>
     </div>
     <div
-      class="ant-col-16 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
       <div
         class="ant-form-item-control ">
         <span
@@ -1199,7 +1199,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-8 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
       <label
         class="ant-form-item-required"
         for="range-time-picker"
@@ -1208,7 +1208,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
       </label>
     </div>
     <div
-      class="ant-col-16 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
       <div
         class="ant-form-item-control ">
         <span
@@ -1240,7 +1240,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-8 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-8">
       <label
         class="ant-form-item-required"
         for="time-picker"
@@ -1249,7 +1249,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
       </label>
     </div>
     <div
-      class="ant-col-16 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16">
       <div
         class="ant-form-item-control ">
         <span
@@ -1269,7 +1269,7 @@ exports[`test renders ./components/form/demo/time-related-controls.md correctly
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-16 ant-col-offset-8 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8">
       <div
         class="ant-form-item-control ">
         <button
@@ -1748,7 +1748,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
   <div
     class="ant-row ant-form-item ant-form-item-with-help">
     <div
-      class="ant-col-5 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
       <label
         class=""
         title="Fail">
@@ -1756,7 +1756,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-col-12 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
       <div
         class="ant-form-item-control has-error">
         <input
@@ -1774,7 +1774,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-5 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
       <label
         class=""
         title="Warning">
@@ -1782,7 +1782,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-col-12 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
       <div
         class="ant-form-item-control has-warning">
         <input
@@ -1796,7 +1796,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
   <div
     class="ant-row ant-form-item ant-form-item-with-help">
     <div
-      class="ant-col-5 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
       <label
         class=""
         title="Validating">
@@ -1804,7 +1804,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-col-12 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
       <div
         class="ant-form-item-control has-feedback is-validating">
         <input
@@ -1822,7 +1822,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-5 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
       <label
         class=""
         title="Success">
@@ -1830,7 +1830,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-col-12 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
       <div
         class="ant-form-item-control has-feedback has-success">
         <input
@@ -1844,7 +1844,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
   <div
     class="ant-row ant-form-item">
     <div
-      class="ant-col-5 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
       <label
         class=""
         title="Warning">
@@ -1852,7 +1852,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-col-12 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
       <div
         class="ant-form-item-control has-feedback has-warning">
         <input
@@ -1866,7 +1866,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
   <div
     class="ant-row ant-form-item ant-form-item-with-help">
     <div
-      class="ant-col-5 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
       <label
         class=""
         title="Fail">
@@ -1874,7 +1874,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-col-12 ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-12">
       <div
         class="ant-form-item-control has-feedback has-error">
         <input
@@ -1892,7 +1892,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
   <div
     class="ant-row ant-form-item ant-form-item-with-help">
     <div
-      class="ant-col-5 ant-form-item-label">
+      class="ant-form-item-label ant-col-xs-24 ant-col-sm-5">
       <label
         class=""
         title="inline">
@@ -1900,7 +1900,7 @@ exports[`test renders ./components/form/demo/validate-static.md correctly 1`] =
       </label>
     </div>
     <div
-      class="ant-form-item-control-wrapper">
+      class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-19">
       <div
         class="ant-form-item-control ">
         <div
diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md
index bffcc6c26..62b338a52 100644
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.md
@@ -59,11 +59,20 @@ class DynamicFieldSet extends React.Component {
   render() {
     const { getFieldDecorator, getFieldValue } = this.props.form;
     const formItemLayout = {
-      labelCol: { span: 4 },
-      wrapperCol: { span: 20 },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 20 },
+      },
     };
     const formItemLayoutWithOutLabel = {
-      wrapperCol: { span: 20, offset: 4 },
+      wrapperCol: {
+        xs: { span: 24, offset: 0 },
+        sm: { span: 20, offset: 4 },
+      },
     };
     getFieldDecorator('keys', { initialValue: [] });
     const keys = getFieldValue('keys');
diff --git a/components/form/demo/register.md b/components/form/demo/register.md
index 90572314b..51666495b 100644
--- a/components/form/demo/register.md
+++ b/components/form/demo/register.md
@@ -76,13 +76,25 @@ class RegistrationForm extends React.Component {
   render() {
     const { getFieldDecorator } = this.props.form;
     const formItemLayout = {
-      labelCol: { span: 6 },
-      wrapperCol: { span: 14 },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 14 },
+      },
     };
     const tailFormItemLayout = {
       wrapperCol: {
-        span: 14,
-        offset: 6,
+        xs: {
+          span: 24,
+          offset: 0,
+        },
+        sm: {
+          span: 14,
+          offset: 6,
+        },
       },
     };
     const prefixSelector = getFieldDecorator('prefix', {
diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.md
index 982bba41f..3f2561922 100644
--- a/components/form/demo/time-related-controls.md
+++ b/components/form/demo/time-related-controls.md
@@ -49,8 +49,14 @@ class TimeRelatedForm extends React.Component {
   render() {
     const { getFieldDecorator } = this.props.form;
     const formItemLayout = {
-      labelCol: { span: 8 },
-      wrapperCol: { span: 16 },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
     };
     const config = {
       rules: [{ type: 'object', required: true, message: 'Please select time!' }],
@@ -109,7 +115,10 @@ class TimeRelatedForm extends React.Component {
           )}
         </FormItem>
         <FormItem
-          wrapperCol={{ span: 16, offset: 8 }}
+          wrapperCol={{
+            xs: { span: 24, offset: 0 },
+            sm: { span: 16, offset: 8 },
+          }}
         >
           <Button type="primary" htmlType="submit" size="large">Submit</Button>
         </FormItem>
diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md
index 1ba1ab64a..b67f0bca3 100644
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.md
@@ -25,12 +25,22 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
 import { Form, Input, DatePicker, Col } from 'antd';
 const FormItem = Form.Item;
 
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 5 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 12 },
+  },
+};
+
 ReactDOM.render(
   <Form>
     <FormItem
+      {...formItemLayout}
       label="Fail"
-      labelCol={{ span: 5 }}
-      wrapperCol={{ span: 12 }}
       validateStatus="error"
       help="Should be combination of numbers & alphabets"
     >
@@ -38,18 +48,16 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
+      {...formItemLayout}
       label="Warning"
-      labelCol={{ span: 5 }}
-      wrapperCol={{ span: 12 }}
       validateStatus="warning"
     >
       <Input placeholder="Warning" id="warning" />
     </FormItem>
 
     <FormItem
+      {...formItemLayout}
       label="Validating"
-      labelCol={{ span: 5 }}
-      wrapperCol={{ span: 12 }}
       hasFeedback
       validateStatus="validating"
       help="The information is being validated..."
@@ -58,9 +66,8 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
+      {...formItemLayout}
       label="Success"
-      labelCol={{ span: 5 }}
-      wrapperCol={{ span: 12 }}
       hasFeedback
       validateStatus="success"
     >
@@ -68,9 +75,8 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
+      {...formItemLayout}
       label="Warning"
-      labelCol={{ span: 5 }}
-      wrapperCol={{ span: 12 }}
       hasFeedback
       validateStatus="warning"
     >
@@ -78,9 +84,8 @@ ReactDOM.render(
     </FormItem>
 
     <FormItem
+      {...formItemLayout}
       label="Fail"
-      labelCol={{ span: 5 }}
-      wrapperCol={{ span: 12 }}
       hasFeedback
       validateStatus="error"
       help="Should be combination of numbers & alphabets"
@@ -90,7 +95,14 @@ ReactDOM.render(
 
     <FormItem
       label="inline"
-      labelCol={{ span: 5 }}
+      labelCol={{
+        xs: { span: 24 },
+        sm: { span: 5 },
+      }}
+      wrapperCol={{
+        xs: { span: 24 },
+        sm: { span: 19 },
+      }}
       help
     >
       <Col span="6">
diff --git a/components/form/style/index.less b/components/form/style/index.less
index 347527842..8cab4e1c4 100644
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@@ -249,8 +249,7 @@ form {
 
 // Form layout
 //== Vertical Form
-.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
-.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label {  // when labelCol is 24, it is a vertical form
+.make-vertical-layout() {
   padding: 0 0 8px;
   display: block;
   text-align: left;
@@ -259,6 +258,36 @@ form {
     content: '';
   }
 }
+.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
+// when labelCol is 24, it is a vertical form
+.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
+.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
+  .make-vertical-layout();
+}
+
+@media (max-width: @screen-xs-max) {
+  .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
+    .make-vertical-layout();
+  }
+}
+
+@media (max-width: @screen-sm-max) {
+  .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
+    .make-vertical-layout();
+  }
+}
+
+@media (max-width: @screen-md-max) {
+  .@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
+    .make-vertical-layout();
+  }
+}
+
+@media (max-width: @screen-lg-max) {
+  .@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
+    .make-vertical-layout();
+  }
+}
 
 //== Inline Form
 .@{form-prefix-cls}-inline {