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 
}