8

Is there any way to swap columns in visual composer on mobile responsive? I want to know it. such as we can swap columns in bootstrap using push or pull class. so can we make something like this in visual composer? i have uploaded images for assistance.

Actual Image: https://i.stack.imgur.com/aFQIB.jpg

What i want: https://i.stack.imgur.com/0hPLR.jpg

Moiz
  • 101
  • 1
  • 1
  • 10

5 Answers5

12

Yes. You can do that using flex-direction:column-reverse

Add display:flex to your row and then, with media queries, in mobile add flex-direction:column-reverse to the same row. It will reverse the column order and so the one that is on right in desktop will move up, and the one on the left will move down.

display:flex you can add it before mobile ( in general styles ) or just in mobile version when you need to add also flex-direction:column-reverse

See example below or 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>

Read more about flex-direction -> Flex direction docs

for iPhone ( safari ) users flex-direction: column-reverse might not work as intended. Use

{ 
  flex-direction: column; 
  flex-wrap: wrap-reverse 
}
Mihai T
  • 17,254
  • 2
  • 23
  • 32
7

Vc composer has two classes: vc_col-sm-push-6 and vc_col-sm-pull-6

And you can use it for your question Hope this help!

Duc Manh Nguyen
  • 768
  • 2
  • 8
  • 13
  • 2
    I wrote an article all about this at https://studiok40.com/using-push-pull-classes-with-visual-composer/ in case you need further explanation. – Gray Ayer Jun 05 '18 at 00:55
  • This is the best answer. Swap the order of your columns in the editor, and apply the classes to each column as described above. "sm" would be the breakpoint you want the switch to happen at (and above), and "6" being if they're 1/2 columns. – fastasleep Jun 22 '18 at 03:49
5

Finally understood how works the push-pull. Sharing for others as I loose some time to figure it out.

You need to order the column so it's well ordered on mobile first, then you'll apply the classes vc_col-sm-push-6 and vc_col-sm-pull-6 to each column so it will then invert the columns as you want them in the wide desktop view.

It works perfect, no css to add, classes are recognized.

Thx @Gray for the tip! Too bad VC doesn't put a quick function for that, same as the hiding function.

Picturgency
  • 51
  • 1
  • 1
2

Change your structure a little bit, I believe it just drag and drop thing in Visual Composer. whatever you want to show in second div, put at first place and give float:right for desktop and float:none for mobile.

here is 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>
AG_
  • 2,589
  • 3
  • 20
  • 32
-2

Just duplicate rows. Make one how you need it to look on desktop, and another how you need it to look on mobile. Disable desktop version on mobile devices and disable mobile version on desktop (column settings -> responsive options)

Modestas
  • 13
  • 1