有没有办法在移动响应中交换视觉作曲家中的列？

Question

有没有办法在移动响应中交换视觉作曲家中的列？我想知道.比如我们可以使用push或pull类在bootstrap中交换列.那么我们可以在视觉作曲家中制作这样的东西吗？我上传了图片以获得帮助.

实际图片:http://imgur.com/a/a1rqp

我想要的是:http://imgur.com/a/AA9aD

Answer 1

是.你可以使用flex-direction:column-reverse

添加display:flex到您的row,然后,通过媒体查询,在移动添加flex-direction:column-reverse到相同row.它将reverse是列顺序,因此桌面右侧的那个将向上移动,而左侧的那个将向下移动.

display:flex 您可以在移动之前(通常样式)添加它,也可以在需要添加时添加移动版本 flex-direction:column-reverse

见下面的例子或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>

阅读有关flex-direction的更多信息 - > Flex方向文档

Answer 2

vc composer有两个类： vc_col-sm-push-6和vc_col-sm-pull-6

你可以用它来解决你的问题希望这会有所帮助！

Answer 3

终于明白推拉是如何工作的了。分享给其他人，因为我失去了一些时间来弄清楚。

您需要对列进行排序，以便首先在移动设备上进行良好排序，然后将类vc_col-sm-push-6和vc_col-sm-pull-6应用于每列，这样它就会根据需要反转列在宽桌面视图中。

它工作完美，无需添加 CSS，类可以被识别。

谢谢@Gray 的提示！可惜 VC 没有为此提供快速功能，与隐藏功能相同。