有没有什么办法可以在视频编辑器中交换移动响应中的列？

问题描述：

有没有什么办法可以在视频编辑器中交换移动响应中的列？我想知道它。比如我们可以使用push或pull类在bootstrap中交换列。所以我们可以在视觉作曲家中做出这样的事情吗？我已经上传图片寻求帮助。有没有什么办法可以在视频编辑器中交换移动响应中的列？

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

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

请在下面检查我的答案。让我知道它是否有效。 –

答

肯定。你能做到这一点使用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 docs

答

改变你的结构有点，我相信它只是在Visual Composer中拖放东西。无论你想在第二格显示，放在第一位，并给予float:right桌面和float:none移动。

这里是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>

答

只是重复的行。让你在桌面上看到你需要的一种，以及另一种你需要它在移动设备上看的方式。禁用移动设备上的桌面版本并在桌面上禁用移动版本（列设置 - >响应选项）

有没有什么办法可以在视频编辑器中交换移动响应中的列？

相关推荐