WordPress插件Visual Composer中颠倒列顺序的方法

在一些需求中,需要在移动设备比如平板、手机上,实现颠倒部分列或者叫内容区块的显示顺序。在Visual Composer中,需要通过一些技巧来实现。

平板

如果想在平板设备上,颠倒两个列的显示顺序。则需要使用vc内置的几个样式,

.vc_col-xs-push-1 到 12
.vc_col-sm-push-1 到 12
.vc_col-md-push-1 到 12
.vc_col-lg-push-1 到 12

以上样式,需要写在column里的Extra class name中,先写push再写pull。比如靠左测的列写vc_col-sm-push-6,靠右侧的列写vc_col-sm-pull-6。仿照boostrap3的方法,参考:https://v3.bootcss.com/css/#grid-column-ordering

手机

手机上颠倒同一行中两个列上下显示的顺序,则需要复杂一点。需要自定义两个样式。分两步走:

第一步,在两个列的这层row当中,添加一个Extra class name,比如就叫reverse-row

第二步,自定义样式,比如加在style.css里面:

.reverse-row {
    display: flex;
}
@media only screen and (max-width : 480px) {
    .reverse-row {
        flex-direction:column-reverse;
    }
}

参考资料

https://themenectar.ticksy.com/article/11298/

https://stackoverflow.com/questions/43140120/is-there-any-way-to-swap-columns-in-visual-composer-on-mobile-responsive

点赞