ووردبريس Wordpress عكس الترتيب على الموبايل Reverse column stacking order

[Rise Company]

ووردبريس Wordpress عكس الترتيب على الموبايل Reverse column stacking order
Columns ordering on devices - WP Bakery Column Stacking / Display Order
swap columns in visual composer on mobile responsive
Stacking Columns Problems When Using WP Bakery Builder




Add display:flex to your row and then, with media queries, in mobile add flex-direction:column-reverse to the same row. It will reverse the 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 you can add it before mobile ( in general styles ) or just in mobile version when you need to add also flex-direction:column-reverse
See example below or jsfiddle

@media handheld, only screen and (max-width: 767px){
    .vc_row.element-row.row {
        position: relative;
        flex-direction: column-reverse;
        display: flex;
    }
}

او

/*reverse row in desktop*/
@media only screen and (min-width: 1001px) {   
 .reverse-row >.col.span_12 {        
flex-direction: row-reverse !important;  
  }
}

او

@media all and (max-width:800px){
.reverse-cols .fusion-row {
display: flex;
flex-flow: wrap;
flex-direction: column-reverse;}}

او

@media screen and (max-width: 800px) {
    .fusion-row { display: flex; flex-flow: column; }
    .fusion-column-last { order: 1}
    .fusion-column-first { order: 2}
}

حل اخر

Duplicate the row that has the 1/4 + 3/4 containers. Set the original to display on medium and large screens only. Set the duplicate to only display on small screens and drag your 3/4 container to the left of the 1/4 container so it’s a row of 3/4 + 1/4.