html - 有什么方法可以在移动响应式视觉 Composer 中交换列？

Question

有什么方法可以在移动响应式 visual composer 中交换列？我想知道。例如我们可以使用 push 或 pull 类在 bootstrap 中交换列。那么我们可以在 visual composer 中制作这样的东西吗？我已上传图片以寻求帮助。

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

我想要什么:http://imgur.com/a/AA9aD

Answer 1

是的。您可以使用 flex-direction:column-reverse

来做到这一点

将 display:flex 添加到您的 row ，然后通过媒体查询，在移动设备中将 flex-direction:column-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 direction docs

iPhone ( safari ) 用户 flex-direction: column-reverse 可能无法按预期工作。使用

{ 
  flex-direction: column; 
  flex-wrap: wrap-reverse 
}