モバイルビューでVueコンポーネントのレンダリング順序を切り替える方法は？

Question

2つのVueコンポーネントがあり、ページを2つに分割しています。左側、右側。私はこのように、すべてのページにこの2を使用しています：

<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> 

しかし、応答を使用している場合、この2つのコンポーネントは、左側の前に右サイドをレンダリングするために、場所を切り替える必要がある特殊なケースがあり、モバイルデザイン。この行動を達成する方法は何でしょうか？私はVue 2.3.3を使用しています

Answer 1

これはCSSの質問です。 flexboxに配置し、メディアクエリでorder propertyを使用して注文を変更します。

表示幅が300〜600ピクセルの場合、次の例では2つの色の領域が入れ替わります。フレックスなし

.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>

Answer 2

、あなたはフロートでこれを達成することができ、ここでは簡単な例です：CSSを使用して

.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>