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>