twitter-bootstrap 有什么方法可以在移动响应上交换视觉作曲家中的列吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43140120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any way to swap columns in visual composer on mobile responsive?
提问by Moiz
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
实际图片：http: //imgur.com/a/a1rqp
What i want: http://imgur.com/a/AA9aD
我想要什么：http: //imgur.com/a/AA9aD
回答by Mihai T
Yes. You can do that using flex-direction:column-reverse
是的。你可以使用flex-direction:column-reverse
Add display:flexto your rowand then, with media queries, in mobile add flex-direction:column-reverseto the same row. It will reversethe 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到您的row，然后使用媒体查询，在移动设备中添加flex-direction:column-reverse到相同的row. 它将reverse列顺序，因此桌面右侧的将向上移动，左侧的将向下移动。
display:flexyou can add it before mobile ( in general styles ) or just in mobile version when you need to add also flex-direction:column-reverse
display:flex您可以在移动版之前添加它（在一般样式中）或在需要添加时仅在移动版中添加 flex-direction:column-reverse
See example below or jsfiddle
请参阅下面的示例或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
阅读更多关于 flex-direction -> Flex 方向文档
回答by Duc Manh Nguyen
Vc composer has two classes: vc_col-sm-push-6and vc_col-sm-pull-6
vc composer有两个类： vc_col-sm-push-6和vc_col-sm-pull-6
And you can use it for your question Hope this help!
你可以用它来解决你的问题希望这有帮助！
回答by Picturgency
Finally understood how works the push-pull. Sharing for others as I loose some time to figure it out.
终于明白了推挽是如何工作的。分享给其他人，因为我有一些时间来弄清楚。
You need to order the column so it's well ordered on mobile first, then you'll apply the classes vc_col-sm-push-6and vc_col-sm-pull-6to each column so it will then invert the columns as you want them in the wide desktop view.
您需要对列进行排序，以便首先在移动设备上对其进行排序，然后将vc_col-sm-push-6和vc_col-sm-pull-6 类应用到每一列，然后它会根据需要反转列在宽桌面视图中。
It works perfect, no css to add, classes are recognized.
它工作完美，无需添加 css，可识别类。
Thx @Gray for the tip! Too bad VC doesn't put a quick function for that, same as the hiding function.
谢谢@Gray 的提示！太糟糕了，VC 没有为此提供快速功能，与隐藏功能相同。
回答by aje
Change your structure a little bit, I believe it just drag and drop thing in Visual Composer.
whatever you want to show in second div, put at first place and give float:rightfor desktop and float:nonefor mobile.
稍微改变你的结构，我相信它只是在 Visual Composer 中拖放东西。无论你想在第二个 div 中显示什么，都放在第一位，并float:right为桌面和float:none移动设备提供。
here is JsFiddle,
这是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>回答by Modestas
Just duplicate rows. Make one how you need it to look on desktop, and another how you need it to look on mobile. Disable desktop version on mobile devices and disable mobile version on desktop (column settings -> responsive options)
只是重复的行。制作一个您需要它在桌面上的外观，以及另一个您需要它在移动设备上的外观。在移动设备上禁用桌面版本并在桌面上禁用移动版本（列设置 -> 响应选项）
