有什么方法可以在移动响应式视觉作曲家中交换列？

Question

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

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

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

原文由 Moiz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的。您可以使用 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 .它将 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 方向文档

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

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

原文由 Mihai T 发布，翻译遵循 CC BY-SA 4.0 许可协议