<template>
  <div :class="[smallClass, middleClass, largeClass]">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "HCol",
  props: {
    sm: {
      type: Number
    },
    md: {
      type: Number
    },
    lg: {
      type: Number
    }
  },
  computed: {
    smallClass() {
      return "col-sm-" + this.sm;
    },
    middleClass() {
      return "col-md-" + this.md;
    },
    largeClass() {
      return "col-lg-" + this.lg;
    }
  }
};
</script>

<style lang="scss">
@import "../../../assets/stylesheet/_col.scss";
</style>
