在一些需求中,需要在移动设备比如平板、手机上,实现颠倒部分列或者叫内容区块的显示顺序。在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; } }