.col-12 {
  height: 100px;
  width: calc(50% - 60px);
  margin-right: 10px;
  margin-left: 10px;
  float: left;
  border: 1px solid black;
}
@media(max-width: 768px) {
  .sm\:col-24 {
    height: 100px;
    width: calc(100% - 60px);
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    float: left;
    border: 1px solid black;
  }
}

Vue.directive('width', function(el, binding) {
  el.innerHTML = Math.floor(el.getBoundingClientRect().width)
  console.log(binding)
})

;(function(){
  new Vue({
    el: '#app',
    data: {
      width: 0
    },
    mounted () {
      window.addEventListener('resize', this.resizeHandler)
    },
    beforeDestroy () {
      window.removeEventListener('resize', this.resizeHandler)
    },
    methods: {
      resizeHandler () {
        this.width = window.innerWidth
      }
    }
  })  
})()