ووردبريس Wordpress عكس الترتيب على الموبايل Reverse column stacking order
ووردبريس 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
https://www.rise.company/upload/uplo...7546012221.png
https://www.rise.company/upload/uplo...7546059722.png
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.
رد: ووردبريس Wordpress عكس الترتيب على الموبايل Reverse column stacking order
شكرا جزيلا على التوضيح والشرح
