Is there any way to swap columns in visual composer on mobile responsive?

Question

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: http://imgur.com/a/a1rqp

What i want: http://imgur.com/a/AA9aD

Answer 1

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 
}

Answer 2

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!

Answer 3

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.

Answer 4

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>