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

user_8283146 0
Viewed 3092

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

vue.js css
4 Answers

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>

user_3921020

If you use Vuetify, you can easily do that with the order property:

<v-row>
    <v-col class="col-11 col-md-6" order-md="2">
        <p>On mobile: on the left; otherwise on the right</p>
    </v-col>
    <v-col class="col-11 col-md-6" order-md="1">
        <p>On mobile: on the right; on tablet/desktop(-> md) on the left</p>
    </v-col>
</v-row>
user_102201420

Without flex, you can achieve this with floats, here is short example:

.right, .left {
  box-sizing: border-box;
  border: black 1px solid;
  width: 50%;
  height: 130px;
}

.left {
  float: left;
}
.right {
  float: right;
}

@media (max-width: 768px) {
  .left, .right {
    float: none;
    width: 100%;
  }
}
<div class="right">
  second
</div>

<div class="left">
  first
</div>

user_86724730

If anyone uses vuetify and wants to change the order of appearance of v-flex elements

In Large Display, i.e. Tablet to Laptop:

Use a scoped css like the following to reverse the order row-wise |A|B| will become |B|A|:

.layout.row.wrap {
        flex-direction: row-reverse;
      }

In Mobile View, changing the order of column:

Should use a scoped css such as follows to reverse the order when they are shown in a mobile devices:

@media (max-width: 425px) {
  .layout.row.wrap {
    flex-direction: column-reverse;
  }
}

Here, max-width can be set to any convenient value to meet the requirement. If only in one layout the reverse ordering is needed but normal order in all other cases, then the specific layout can be separated in a component where this custom styling may be applied.

More about Ordering Flex Items

user_31314330
Related