diff --git a/package.json b/package.json
index 073158e..cca8867 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.9.10-rc-3",
+  "version": "0.9.10-rc-4",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",
diff --git a/src/components/layout/col.vue b/src/components/layout/col.vue
index 6296eab..52d7731 100644
--- a/src/components/layout/col.vue
+++ b/src/components/layout/col.vue
@@ -15,7 +15,11 @@
             offset: [Number, String],
             push: [Number, String],
             pull: [Number, String],
-            className: String
+            className: String,
+            xs: [Number, Object],
+            sm: [Number, Object],
+            md: [Number, Object],
+            lg: [Number, Object]
         },
         data () {
             return {
@@ -24,7 +28,7 @@
         },
         computed: {
             classes () {
-                return [
+                let classList = [
                     `${prefixCls}`,
                     {
                         [`${prefixCls}-span-${this.span}`]: this.span,
@@ -34,7 +38,24 @@
                         [`${prefixCls}-pull-${this.pull}`]: this.pull,
                         [`${this.className}`]: !!this.className
                     }
-                ]
+                ];
+
+                ['xs', 'sm', 'md', 'lg'].forEach(size => {
+                    if (typeof this[size] === 'number') {
+                        classList.push(`${prefixCls}-span-${size}-${this[size]}`);
+                    } else if (typeof this[size] === 'object') {
+                        let props = this[size];
+                        Object.keys(props).forEach(prop => {
+                            classList.push(
+                                prop !== 'span'
+                                    ? `${prefixCls}-${size}-${prop}-${props[prop]}`
+                                    : `${prefixCls}-span-${size}-${props[prop]}`
+                            );
+                        });
+                    }
+                });
+
+                return classList;
             },
             styles () {
                 let style = {};
diff --git a/src/styles/common/layout.less b/src/styles/common/layout.less
index d9f17ad..b57119a 100644
--- a/src/styles/common/layout.less
+++ b/src/styles/common/layout.less
@@ -52,3 +52,37 @@
 }
 
 .make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+    .make-grid(-sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+    .make-grid(-md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+    .make-grid(-lg);
+}
diff --git a/src/styles/mixins/layout.less b/src/styles/mixins/layout.less
index 7744eee..5209007 100644
--- a/src/styles/mixins/layout.less
+++ b/src/styles/mixins/layout.less
@@ -9,13 +9,13 @@
     .clearfix;
 }
 
-.float-grid-columns() {
+.float-grid-columns(@class) {
     .col(@index) { // initial
-        @item: ~".@{col-prefix-cls}-span-@{index}";
+        @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
         .col((@index + 1), @item);
     }
     .col(@index, @list) when (@index =< @grid-columns) { // general
-        @item: ~".@{col-prefix-cls}-span-@{index}";
+        @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
         .col((@index + 1), ~"@{list}, @{item}");
     }
     .col(@index, @list) when (@index > @grid-columns) { // terminal
@@ -27,28 +27,28 @@
     .col(1); // kickstart it
 }
 
-.loop-grid-columns(@index) when (@index > 0) {
-    .@{col-prefix-cls}-span-@{index} {
+.loop-grid-columns(@index, @class) when (@index > 0) {
+    .@{col-prefix-cls}-span@{class}-@{index} {
         display: block;
         width: percentage((@index / @grid-columns));
     }
-    .@{col-prefix-cls}-push-@{index} {
+    .@{col-prefix-cls}@{class}-push-@{index} {
         left: percentage((@index / @grid-columns));
     }
-    .@{col-prefix-cls}-pull-@{index} {
+    .@{col-prefix-cls}@{class}-pull-@{index} {
         right: percentage((@index / @grid-columns));
     }
-    .@{col-prefix-cls}-offset-@{index} {
+    .@{col-prefix-cls}@{class}-offset-@{index} {
         margin-left: percentage((@index / @grid-columns));
     }
-    .@{col-prefix-cls}-order-@{index} {
+    .@{col-prefix-cls}@{class}-order-@{index} {
         order: @index;
     }
-    .loop-grid-columns((@index - 1));
+    .loop-grid-columns((@index - 1), @class);
 }
 
-.loop-grid-columns(@index) when (@index = 0) {
-    .@{col-prefix-cls}-@{index} {
+.loop-grid-columns(@index, @class) when (@index = 0) {
+    .@{col-prefix-cls}@{class}-@{index} {
         display: none;
     }
     .@{col-prefix-cls}-push-@{index} {
@@ -59,7 +59,7 @@
     }
 }
 
-.make-grid() {
-    .float-grid-columns();
-    .loop-grid-columns(@grid-columns);
+.make-grid(@class: ~'') {
+    .float-grid-columns(@class);
+    .loop-grid-columns(@grid-columns, @class);
 }
\ No newline at end of file
diff --git a/src/styles/themes/default/custom.less b/src/styles/themes/default/custom.less
index 40cd11b..5c5cceb 100644
--- a/src/styles/themes/default/custom.less
+++ b/src/styles/themes/default/custom.less
@@ -112,6 +112,27 @@
 // Tag
 @tag-font-size          : 12px;
 
+// Media queries breakpoints
+// Extra small screen / phone
+@screen-xs              : 480px;
+@screen-xs-min          : @screen-xs;
+@screen-xs-max          : (@screen-xs-min - 1);
+
+// Small screen / tablet
+@screen-sm              : 768px;
+@screen-sm-min          : @screen-sm;
+@screen-sm-max          : (@screen-sm-min - 1);
+
+// Medium screen / desktop
+@screen-md              : 992px;
+@screen-md-min          : @screen-md;
+@screen-md-max          : (@screen-md-min - 1);
+
+// Large screen / wide desktop
+@screen-lg              : 1200px;
+@screen-lg-min          : @screen-lg;
+@screen-lg-max          : (@screen-lg-min - 1);
+
 // Z-index
 @zindex-spin            : 8;
 @zindex-affix           : 10;
diff --git a/test/routers/more.vue b/test/routers/more.vue
index f0cf592..5d15e79 100644
--- a/test/routers/more.vue
+++ b/test/routers/more.vue
@@ -1,133 +1,30 @@
-<style scoped>
-    /*body{*/
-        /*padding: 50px;*/
-        /*height: 2000px;*/
-    /*}*/
-    .example-badge{
-        width: 42px;
-        height: 42px;
-        border-radius: 6px;
-        background: #eee;
-        display: inline-block;
+<style>
+    .ivu-col div.aaaaa{
+        height: 100px;
+        line-height: 100px;
+        text-align: center;
+        color: #fff;
+        background: rgba(0, 153, 229, .9);
+    }
+    .ivu-col:nth-child(odd) div.aaaaa{
+        background: rgba(0, 153, 229, .7);
     }
 </style>
 <template>
-
-    <Badge count="10">
-        <a class="example-badge"></a>
-    </Badge>
-
-    <Tag color="green" closable @on-close="closed">管理员</Tag>
-    <Progress :percent="50" status="active" :stroke-width="20">
-
-    </Progress>
-
-    <Circle :percent="p">
-        {{p}}%
-    </Circle>
-    <br><br>
-    <Timeline pending>
-        <Timeline-item color="red">发布3.0版本</Timeline-item>
-        <Timeline-item color="green">
-            <Icon type="cloak" slot="dot"></Icon>
-            发布2.0版本
-        </Timeline-item>
-        <Timeline-item color="#ff6600">发布1.0版本</Timeline-item>
-        <Timeline-item>发布里程碑版本</Timeline-item>
-    </Timeline>
+    <Row>
+        <i-col :xs="2" :sm="4" :md="6" :lg="8"><div class="aaaaa">Col 1</div></i-col>
+        <i-col :xs="20" :sm="16" :md="12" :lg="8"><div class="aaaaa">Col 2</div></i-col>
+        <i-col :xs="2" :sm="4" :md="6" :lg="8"><div class="aaaaa">Col 3</div></i-col>
+    </Row>
     <br><br>
-    <Affix :offset-top="50" @on-change="affixChange">
-        <i-button>固定的图钉</i-button>
-    </Affix>
-    <Back-top @on-click="backtop">
-
-    </Back-top>
-
-    <div style="width: 200px;height: 100px;border:1px solid #b2b2b2;position:relative">
-        <!--<Spin size="large" fix>加载中...</Spin>-->
-        <Spin size="large" fix v-if="spinShow">加载中...</Spin>
-    </div>
-    <div @click="spinShow = !spinShow">消失</div>
-    <br><br>
-
-    <i-button @click="nextStep">下一步</i-button>
-    <i-button @click="step_status = 'error'">步骤3切换为错误</i-button>
-    <i-button @click="step_process = 'error'">切换steps状态为error</i-button>
-    <Breadcrumb separator="<b>=></b>">
-        <Breadcrumb-item href="/index">首页</Breadcrumb-item>
-        <Breadcrumb-item href="/my">我的</Breadcrumb-item>
-        <Breadcrumb-item>
-            <Icon type="photo"></Icon>照片
-        </Breadcrumb-item>
-    </Breadcrumb>
-    <br>
-    <Steps :current="1" status="error">
-        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-    </Steps>
-    <i-button @click="testStatus = 'process'">change Status</i-button>
+    <Row>
+        <i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 1</div></i-col>
+        <i-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 2</div></i-col>
+        <i-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="aaaaa">Col 3</div></i-col>
+    </Row>
 </template>
 <script>
-    import { Badge, Tag, Progress, Circle, Timeline, Icon, Affix, iButton, BackTop, Spin, Steps, Breadcrumb} from 'iview';
-    const TimelineItem = Timeline.Item;
-    const Step = Steps.Step;
-    const BreadcrumbItem = Breadcrumb.Item;
-
     export default {
-        components: {
-            Badge,
-            Tag,
-            Progress,
-            Circle,
-            Timeline,
-            TimelineItem,
-            Icon,
-            Affix,
-            iButton,
-            BackTop,
-            Spin,
-            Steps,
-            Step,
-            Breadcrumb,
-            BreadcrumbItem
-        },
-        props: {
-
-        },
-        data () {
-            return {
-                total: 512,
-                p: 50,
-                step_current: 0,
-                step_status: 'wait',
-                step_process: 'process',
-                spinShow: true,
-                testStatus: 'wait'
-            }
-        },
-        computed: {
 
-        },
-        methods: {
-            closed (e) {
-                console.log(e)
-            },
-            affixChange (status) {
-                console.log(status)
-            },
-            backtop () {
-                console.log('toppp')
-            },
-            nextStep () {
-                this.step_current += 1;
-            }
-        },
-        ready () {
-            setTimeout(() => {
-                this.p = 60;
-            }, 1000)
-        }
     }
 </script>
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 09685eb..4030493 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -1,157 +1,279 @@
 <template>
-    <i-button @click="down">down</i-button>
-    <checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns">
-        <checkbox value="show">展示</checkbox>
-        <checkbox value="weak">唤醒</checkbox>
-        <checkbox value="signin">登录</checkbox>
-        <checkbox value="click">点击</checkbox>
-        <checkbox value="active">激活</checkbox>
-        <checkbox value="day7">7日留存</checkbox>
-        <checkbox value="day30">30日留存</checkbox>
-        <checkbox value="tomorrow">次日留存</checkbox>
-        <checkbox value="day">日活跃</checkbox>
-        <checkbox value="week">周活跃</checkbox>
-        <checkbox value="month">月活跃</checkbox>
-    </checkbox-group>
-    <i-table :content="self" :data="tableData2" :columns="tableColumns2" border v-ref:table></i-table>
+    <i-table :columns="columns8" :data="data7" size="small" v-ref:table></i-table>
+    <br>
+    <i-button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</i-button>
+    <i-button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</i-button>
+    <i-button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</i-button>
 </template>
 <script>
     export default {
         data () {
             return {
-                self: this,
-                tableData2: this.mockTableData2(),
-                tableColumns2: [],
-                tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']
-            }
-        },
-        methods: {
-            mockTableData2 () {
-                let data = [];
-                function getNum() {
-                    return Math.floor(Math.random () * 10000 + 1);
-                }
-                for (let i = 0; i < 10; i++) {
-                    data.push({
-                        name: '推广名称' + (i+1),
-                        fav: 0,
-                        show: getNum(),
-                        weak: getNum(),
-                        signin: getNum(),
-                        click: getNum(),
-                        active: getNum(),
-                        day7: getNum(),
-                        day30: getNum(),
-                        tomorrow: getNum(),
-                        day: getNum(),
-                        week: getNum(),
-                        month: getNum()
-                    })
-                }
-                return data;
-            },
-            getTable2Columns () {
-                const table2ColumnList = {
-                    name: {
-                        title: '名称',
-                        key: 'name',
-                        fixed: 'left',
-                        width: 200,
-                        render (row, column, index) {
-                            return `<Icon style="cursor: pointer" type="ios-star-outline" v-if="tableData2[${index}].fav === 0" @click="toggleFav(${index})"></Icon>
-                                    <Icon style="cursor: pointer;color:#f60" type="ios-star" v-if="tableData2[${index}].fav === 1" @click="toggleFav(${index})"></Icon>
-                                    <span>${row.name}</span>`;
+                columns8: [
+                    {
+                        "title": "名称",
+                        "key": "name",
+                        "fixed": "left",
+                        "width": 200
+                    },
+                    {
+                        "title": "展示",
+                        "key": "show",
+                        "width": 150,
+                        "sortable": true,
+                        filters: [
+                            {
+                                label: '大于4000',
+                                value: 1
+                            },
+                            {
+                                label: '小于4000',
+                                value: 2
+                            }
+                        ],
+                        filterMultiple: false,
+                        filterMethod (value, row) {
+                            if (value === 1) {
+                                return row.show > 4000;
+                            } else if (value === 2) {
+                                return row.show < 4000;
+                            }
                         }
                     },
-                    show: {
-                        title: '展示',
-                        key: 'show',
-                        width: 150,
-                        sortable: true
-                    },
-                    weak: {
-                        title: '唤醒',
-                        key: 'weak',
-                        width: 150,
-                        sortable: true
-                    },
-                    signin: {
-                        title: '登录',
-                        key: 'signin',
-                        width: 150,
-                        sortable: true
-                    },
-                    click: {
-                        title: '点击',
-                        key: 'click',
-                        width: 150,
-                        sortable: true
-                    },
-                    active: {
-                        title: '激活',
-                        key: 'active',
-                        width: 150,
-                        sortable: true
-                    },
-                    day7: {
-                        title: '7日留存',
-                        key: 'day7',
-                        width: 150,
-                        sortable: true
-                    },
-                    day30: {
-                        title: '30日留存',
-                        key: 'day30',
-                        width: 150,
-                        sortable: true
-                    },
-                    tomorrow: {
-                        title: '次日留存',
-                        key: 'tomorrow',
-                        width: 150,
-                        sortable: true
-                    },
-                    day: {
-                        title: '日活跃',
-                        key: 'day',
-                        width: 150,
-                        sortable: true
-                    },
-                    week: {
-                        title: '周活跃',
-                        key: 'week',
-                        width: 150,
-                        sortable: true
-                    },
-                    month: {
-                        title: '月活跃',
-                        key: 'month',
-                        width: 150,
-                        sortable: true
+                    {
+                        "title": "唤醒",
+                        "key": "weak",
+                        "width": 150,
+                        "sortable": true
+                    },
+                    {
+                        "title": "登录",
+                        "key": "signin",
+                        "width": 150,
+                        "sortable": true
+                    },
+                    {
+                        "title": "点击",
+                        "key": "click",
+                        "width": 150,
+                        "sortable": true
+                    },
+                    {
+                        "title": "激活",
+                        "key": "active",
+                        "width": 150,
+                        "sortable": true
+                    },
+                    {
+                        "title": "7日留存",
+                        "key": "day7",
+                        "width": 150,
+                        "sortable": true
+                    },
+                    {
+                        "title": "30日留存",
+                        "key": "day30",
+                        "width": 150,
+                        "sortable": true
+                    },
+                    {
+                        "title": "次日留存",
+                        "key": "tomorrow",
+                        "width": 150,
+                        "sortable": true
+                    },
+                    {
+                        "title": "日活跃",
+                        "key": "day",
+                        "width": 150,
+                        "sortable": true
+                    },
+                    {
+                        "title": "周活跃",
+                        "key": "week",
+                        "width": 150,
+                        "sortable": true
+                    },
+                    {
+                        "title": "月活跃",
+                        "key": "month",
+                        "width": 150,
+                        "sortable": true
+                    }
+                ],
+                data7: [
+                    {
+                        "name": "推广名称1",
+                        "fav": 0,
+                        "show": 7302,
+                        "weak": 5627,
+                        "signin": 1563,
+                        "click": 4254,
+                        "active": 1438,
+                        "day7": 274,
+                        "day30": 285,
+                        "tomorrow": 1727,
+                        "day": 558,
+                        "week": 4440,
+                        "month": 5610
+                    },
+                    {
+                        "name": "推广名称2",
+                        "fav": 0,
+                        "show": 4720,
+                        "weak": 4086,
+                        "signin": 3792,
+                        "click": 8690,
+                        "active": 8470,
+                        "day7": 8172,
+                        "day30": 5197,
+                        "tomorrow": 1684,
+                        "day": 2593,
+                        "week": 2507,
+                        "month": 1537
+                    },
+                    {
+                        "name": "推广名称3",
+                        "fav": 0,
+                        "show": 7181,
+                        "weak": 8007,
+                        "signin": 8477,
+                        "click": 1879,
+                        "active": 16,
+                        "day7": 2249,
+                        "day30": 3450,
+                        "tomorrow": 377,
+                        "day": 1561,
+                        "week": 3219,
+                        "month": 1588
+                    },
+                    {
+                        "name": "推广名称4",
+                        "fav": 0,
+                        "show": 9911,
+                        "weak": 8976,
+                        "signin": 8807,
+                        "click": 8050,
+                        "active": 7668,
+                        "day7": 1547,
+                        "day30": 2357,
+                        "tomorrow": 7278,
+                        "day": 5309,
+                        "week": 1655,
+                        "month": 9043
+                    },
+                    {
+                        "name": "推广名称5",
+                        "fav": 0,
+                        "show": 934,
+                        "weak": 1394,
+                        "signin": 6463,
+                        "click": 5278,
+                        "active": 9256,
+                        "day7": 209,
+                        "day30": 3563,
+                        "tomorrow": 8285,
+                        "day": 1230,
+                        "week": 4840,
+                        "month": 9908
+                    },
+                    {
+                        "name": "推广名称6",
+                        "fav": 0,
+                        "show": 6856,
+                        "weak": 1608,
+                        "signin": 457,
+                        "click": 4949,
+                        "active": 2909,
+                        "day7": 4525,
+                        "day30": 6171,
+                        "tomorrow": 1920,
+                        "day": 1966,
+                        "week": 904,
+                        "month": 6851
+                    },
+                    {
+                        "name": "推广名称7",
+                        "fav": 0,
+                        "show": 5107,
+                        "weak": 6407,
+                        "signin": 4166,
+                        "click": 7970,
+                        "active": 1002,
+                        "day7": 8701,
+                        "day30": 9040,
+                        "tomorrow": 7632,
+                        "day": 4061,
+                        "week": 4359,
+                        "month": 3676
+                    },
+                    {
+                        "name": "推广名称8",
+                        "fav": 0,
+                        "show": 862,
+                        "weak": 6520,
+                        "signin": 6696,
+                        "click": 3209,
+                        "active": 6801,
+                        "day7": 6364,
+                        "day30": 6850,
+                        "tomorrow": 9408,
+                        "day": 2481,
+                        "week": 1479,
+                        "month": 2346
+                    },
+                    {
+                        "name": "推广名称9",
+                        "fav": 0,
+                        "show": 567,
+                        "weak": 5859,
+                        "signin": 128,
+                        "click": 6593,
+                        "active": 1971,
+                        "day7": 7596,
+                        "day30": 3546,
+                        "tomorrow": 6641,
+                        "day": 1611,
+                        "week": 5534,
+                        "month": 3190
+                    },
+                    {
+                        "name": "推广名称10",
+                        "fav": 0,
+                        "show": 3651,
+                        "weak": 1819,
+                        "signin": 4595,
+                        "click": 7499,
+                        "active": 7405,
+                        "day7": 8710,
+                        "day30": 5518,
+                        "tomorrow": 428,
+                        "day": 9768,
+                        "week": 2864,
+                        "month": 5811
                     }
-                };
-
-                let data = [table2ColumnList.name];
-
-                this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
-
-                return data;
-            },
-            changeTableColumns () {
-                this.tableColumns2 = this.getTable2Columns();
-            },
-            toggleFav (index) {
-                this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
-            },
-            down () {
-                this.$refs.table.exportCsv({
-                    filename: '2132',
-                    original: false
-                });
+                ]
             }
         },
-        ready () {
-            this.changeTableColumns();
+        methods: {
+            exportData (type) {
+                if (type === 1) {
+                    this.$refs.table.exportCsv({
+                        filename: '原始数据'
+                    });
+                } else if (type === 2) {
+                    this.$refs.table.exportCsv({
+                        filename: '排序和过滤后的数据',
+                        original: false
+                    });
+                } else if (type === 3) {
+                    this.$refs.table.exportCsv({
+                        filename: '自定义数据',
+                        columns: this.columns8.filter((col, index) => index < 4),
+                        data: this.data7.filter((data, index) => index < 4)
+                    });
+                }
+            }
         }
     }
 </script>
--
libgit2 0.21.4