it-swarm.com.de

Gibt es eine Möglichkeit, in Visual Composer auf Mobile Responsive Spalten auszutauschen?

Gibt es eine Möglichkeit, in Visual Composer auf Mobile Responsive Spalten auszutauschen? Ich will es wissen. Wir können beispielsweise Spalten im Bootstrap mithilfe der Push- oder Pull-Klasse austauschen. können wir so etwas in Visual Composer machen? Ich habe Bilder zur Unterstützung hochgeladen.

Aktuelles Bild: http://imgur.com/a/a1rqp

Was ich will: http://imgur.com/a/AA9aD

6
Moiz

Ja. Sie können dies mit flex-direction:column-reverse tun 

Fügen Sie display:flex zu Ihrer row hinzu, und fügen Sie dann in mobile Abfragen flex-direction:column-reverse zu derselben row hinzu. Es wird reverse die Spaltenreihenfolge, und die auf dem Desktop rechts befindliche wird nach oben und die nach links verschoben.

display:flex Sie können es vor dem Handy (in allgemeinen Stilen) oder nur in der mobilen Version hinzufügen, wenn Sie auch flex-direction:column-reverse hinzufügen müssen. 

Siehe Beispiel unten oder 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>

Lesen Sie mehr über Flex-Richtung -> Flex-Richtungsdokumente

8
Mihai T

Ändern Sie Ihre Struktur ein wenig, ich glaube, es ist einfach ein Drag & Drop-Vorgang in Visual Composer. Was auch immer Sie im zweiten Div anzeigen möchten, setzen Sie an erster Stelle und geben Sie float:right für Desktop und float:none für Mobilgeräte.

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

Vc Composer hat zwei Klassen: vc_col-sm-Push-6 und vc_col-sm-pull-6

Und Sie können es für Ihre Frage verwenden. Hoffen Sie diese Hilfe!

2
Duc Manh Nguyen

Endlich verstanden, wie das Push-Pull funktioniert. Für andere zu teilen, wenn ich etwas Zeit verliere, um es herauszufinden.

Sie müssen die Spalte so ordnen, dass sie zuerst auf dem Handy ordentlich angeordnet ist. Dann werden Sie die Klassen vc_col-sm-Push-6 und vc_col-sm-pull-6 auf jede Spalte anwenden, so dass dies der Fall ist invertieren Sie dann die Spalten wie gewünscht in der großen Desktopansicht. 

Es funktioniert perfekt, keine CSS hinzuzufügen, Klassen werden erkannt.

Thx @Gray für den Tipp! Schade, dass VC keine schnelle Funktion dafür gibt, genau wie die Hiding-Funktion.

2
Picturgency

Zeilen einfach duplizieren. Machen Sie eine, wie Sie es benötigen, um auf dem Desktop auszusehen, und eine andere, wie Sie es benötigen, um auf dem Handy auszusehen. Deaktivieren Sie die Desktopversion auf mobilen Geräten und die mobile Version auf dem Desktop (Spalteneinstellungen -> Reaktionsoptionen).

1
Modestas