JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<div id='app'>
  <div :class='[sideBarClass]'>Sidebar</div>
</div>

CSS

.desktop-sidebar {
  text-align: center;
}

.mobile-sidebar {
  text-align: right;
}

JavaScript

new Vue({
  data: {
    sideBarClass: 'desktop-sidebar'
  },
  mounted() {
  	this.handleResize()
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.sideBarClass = window.matchMedia('(max-width: 600px)').matches ?
        'mobile-sidebar' : 'desktop-sidebar'
    }
  }
}).$mount('#app')