web-dev-qa-db-ja.com

ビジュアルで列を交換する方法はありますかcomposerモバイルレスポンシブで？

ビジュアルで列を交換する方法はありますかcomposerモバイルレスポンシブですか？知りたいです。たとえば、bootstrapで列を交換することができます）クラスです。ビジュアルコンポーザーでこのようなものを作成できますか？支援のために画像をアップロードしました。

実際の画像： http://imgur.com/a/a1rqp

私が欲しいもの： http://imgur.com/a/AA9aD

htmltwitter-bootstrapcssresponsive-designvisual-composer
8
Moiz

はい。あなたはflex-direction:column-reverseを使用してそれを行うことができます

rowにdisplay:flexを追加し、次にメディアクエリを使用して、モバイルでflex-direction:column-reverseを同じrowに追加します。列の順序がreverseになるため、デスクトップの右側にある列が上に移動し、左側にある列が下に移動します。

display:flexモバイル（一般的なスタイル）の前に追加することも、追加する必要がある場合はモバイルバージョンに追加することもできますflex-direction:column-reverse

以下の例または jsfiddle を参照してください

.vc_row { display:flex;}
.col { padding:0 15px;height:100px;border:1px solid red}



@media only screen and (max-width: 767px) {
  .vc_row { flex-direction:column-reverse}
}
<div class="vc_row">
    <div class="col">
    text on left in desktop and on bottom in mobile
    </div>
    <div class="col">
    text on right in desktop and on top in mobile
    </div>
</div>

Flex-directionの詳細を読む->Flex direction docs

10
Mihai T

Vc composerには2つのクラスがあります：vc_col-sm-Push-6およびvc_col-sm-pull-6

そして、あなたはそれをあなたの質問に使うことができます

4
Duc Manh Nguyen

最後に、プッシュプルの仕組みを理解しました。私がそれを理解するために少し時間を失うとき、他の人のために共有します。

最初にモバイルでうまく並べられるように列を並べる必要があります。次に、クラスvc_col-sm-Push-6とvc_col-sm-pull-6を適用します各列に移動すると、ワイドデスクトップビューで必要に応じて列が反転します。

それは完璧に動作し、追加するCSSはなく、クラスが認識されます。

ヒントのためのThx @Gray！ひどすぎるVCは、非表示関数と同じように、そのためのクイック関数を配置しません。

3
Picturgency

構造を少し変更してください。VisualComposerでドラッグアンドドロップするだけだと思います。 2番目のdivに表示するものは何でも、最初に配置してfloat:rightデスクトップおよびfloat:noneモバイル用。

ここに JsFiddle 、

div{
  width:50%;
  background:blue;
  float:right;
  color:white
}
@media (max-width: 700px) {
  .first{
    background:red;
    float:none;
  }
  div{
    width:100%
  }
}
<div class="first">First</div>
<div class="second">second</div>
2
aje

行を複製するだけです。 1つはデスクトップでの表示に必要な方法、もう1つはモバイルでの表示に必要な方法を作成します。モバイルデバイスでデスクトップバージョンを無効にし、デスクトップでモバイルバージョンを無効にします（列設定->レスポンシブオプション）

1
Modestas