web-dev-qa-db-fra.com

Est-il possible d’échanger des colonnes dans Visual Composer sur mobile responsive?

Est-il possible d’échanger des colonnes dans Visual Composer sur mobile responsive? Je veux le savoir. tels que nous pouvons échanger des colonnes dans bootstrap en utilisant Push ou Pull Class. alors peut-on faire quelque chose comme ça dans Visual Composer? J'ai téléchargé des images pour obtenir de l'aide.

Image réelle: http://imgur.com/a/a1rqp

Ce que je veux: http://imgur.com/a/AA9aD

html5twitter-bootstrapcss3responsive-designvisual-composer
6
Moiz

Oui. Vous pouvez le faire en utilisant flex-direction:column-reverse 

Ajoutez display:flex à votre row, puis, avec les requêtes multimédia, dans Mobile, ajoutez flex-direction:column-reverse à la même row. reverse va dans l’ordre des colonnes. Ainsi, celle qui est sur la droite du bureau va monter, et celle de gauche va descendre.

display:flex vous pouvez l'ajouter avant mobile (dans les styles généraux) ou simplement dans la version mobile lorsque vous devez également ajouter flex-direction:column-reverse 

Voir exemple ci-dessous ou 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>

En savoir plus sur flex-direction -> docs Flex direction

8
Mihai T

Changez un peu votre structure, je crois que cela suffit de glisser-déposer quelque chose dans Visual Composer . Ce que vous voulez montrer en deuxième division, mettez-le à la première place et donnez float:right pour desktop et float:none pour mobile.

voici 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 a deux classes: vc_col-sm-Push-6 et vc_col-sm-pull-6

Et vous pouvez l'utiliser pour votre question J'espère que cela vous aidera!

2
Duc Manh Nguyen

Enfin compris comment fonctionne le Push-pull. Partage pour les autres, je perds un peu de temps pour le comprendre.

Vous devez d'abord commander la colonne pour qu'elle soit bien ordonnée sur mobile, puis vous appliquerez les classes vc_col-sm-Push-6 et vc_col-sm-pull-6 à chaque colonne de sorte puis inversez les colonnes comme vous le souhaitez dans la vue large du bureau. 

Cela fonctionne parfaitement, pas de css à ajouter, les classes sont reconnues.

Merci @Gray pour le tuyau! Dommage que VC ne mette pas de fonction rapide pour cela, comme pour la fonction de masquage.

2
Picturgency

Il suffit de dupliquer les lignes. Faites-en une comme vous en avez besoin pour regarder sur le bureau, et une autre comme vous en avez besoin pour regarder sur le mobile. Désactiver la version de bureau sur les appareils mobiles et désactiver la version mobile sur le bureau (paramètres de colonne -> options réactives)

1
Modestas