iview响应式布局

我想说，我要被逼成前端了。

之前没接触过响应式，这两天和另一位前端程序媛小小的研究了下。做了一个小例子，记录一下，方便以后使用。

<template>
  <div>
    <Row>
        <Col :xs="{ span: 24}" :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
    </Row>
   <Row>
        <Col :xs="{ span: 24}" :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
    </Row>
  </div>
</template>
<script>
    export default {
        
    }
</script>
<style>
  .ivu-col{
    border:1px solid red
  }
</style>