How to switch rendering order for Vue components on mobile view?

Question

I have 2 Vue components, dividing the page into 2 parts. Left side, and right side. I'm using this two on every page, like this:

<template>
  <div class="page-body">
    <left-side>
      <p class="text" >{{ $t('about') }}</p>
    </left-side>
    <right-side>
      <p class="slogen bottom">{{ $t('slogen') }}</p>
    </right-side>
  </div>
</template>

But there is a special case, when this two components should switch place, to render the right-side before the left-side, when using responsive mobile design. What would be the way to accomplish this behavior? I'm using Vue 2.3.3

Answer 1

This is a CSS question. Lay them out in a flexbox and use the order property in a media query to change the order.

The example below will swap the two colored areas when the display width is between 300 and 600 pixels.

.page-body {
  display: flex;
}

left-side,
right-side {
  background-color: #fdc;
  display: block;
  flex-basis: 50%;
}

right-side {
  background-color: #cdf;
  text-align: right;
}

@media (min-width: 300px) and (max-width: 500px) {
  left-side {
    order: 2;
  }
}

<div class="page-body">
  <left-side>
    <p class="text">{{ $t('about') }}</p>
  </left-side>
  <right-side>
    <p class="slogen bottom">{{ $t('slogen') }}</p>
  </right-side>
</div>