responsive layout

packages/col/src/col.vue

@@ -1,17 +1,3 @@
-<template>
-  <div
-    class="el-col"
-    :class="[
-      'el-col-' + span,
-      offset ? 'el-col-offset-' + offset : '',
-      pull ? 'el-col-pull-' + pull : '',
-      push ? 'el-col-push-' + push : ''
-    ]"
-    :style="style"
-  >
-    <slot></slot>
-  </div>
-</template>
 <script>
   export default {
     name: 'ElCol',
@@ -23,7 +9,11 @@
       },
       offset: Number,
       pull: Number,
-      push: Number
+      push: Number,
+      xs: [Number, Object],
+      sm: [Number, Object],
+      md: [Number, Object],
+      lg: [Number, Object]
     },
 
     computed: {
@@ -41,6 +31,49 @@
 
         return ret;
       }
+    },
+    render(h) {
+      let { style } = this;
+      let classList = [];
+
+      ['span', 'offset', 'pull', 'push'].forEach(prop => {
+        if (this[prop]) {
+          classList.push(
+            prop !== 'span'
+            ? `el-col-${prop}-${this[prop]}`
+            : `el-col-${this[prop]}`
+          );
+        }
+      });
+
+      ['xs', 'sm', 'md', 'lg'].forEach(size => {
+        if (typeof this[size] === 'number') {
+          classList.push(`el-col-${size}-${this[size]}`);
+        } else if (typeof this[size] === 'object') {
+          let props = this[size];
+          Object.keys(props).forEach(prop => {
+            classList.push(
+              prop !== 'span'
+              ? `el-col-${size}-${prop}-${props[prop]}`
+              : `el-col-${size}-${props[prop]}`
+            );
+          });
+        }
+      });
+
+      const data = {
+        class: classList,
+        style
+      };
+
+      return (
+        <div
+          class="el-col"
+          {...data}
+        >
+          {this.$slots.default}
+        </div>
+      );
     }
   };
 </script>