Reverse stacking – 4 column row

columns stacking

5 years ago kendall.cochrane
Participant

Hi guys,

I need to enable reverse stacking on a 4 column row in WP bakery.
Instead of stacking left over right, left over right, I want the row to stack right over left, right over left.

Here is a screengrab of how the page is set up – I want the row to stack, image, text, image, text in mobile: https://paste.pics/3b1e54f72794c0675eced7b3eac9dddc

I have tried this – but it didnt work…
/*reverse row in desktop*/
@media only screen and (min-width: 1001px) {
.reverse-row >.col.span_12 {
flex-direction: row-reverse !important;
}
}
5 years ago themes2go
Keymaster
Hello!
I’ve done a little research for you and it seems there is a quick workaround to let columns stacking correctly on mobile.

You can use two CSS classes included in Page Builder called .col-xs-push-# or .col-xs-pull-#.

In the example below, I have 2 rows with 2 columns of 6/12 each.

https://imgur.com/g07BShO

On the second row, I’ve added col-xs-push-6 to the text and col-xs-pull-6 to the image and this is the result on mobile breakpoint:

https://imgur.com/dLP9pxu

For further details you can check this link: https://studiok40.com/using-push-pull-classes-with-visual-composer/
Try this method on your layout and keep me posted.

Best,
Andrea
- This reply was modified 5 years ago by themes2go.
5 years ago kendall.cochrane
Participant

Hey Andrea, Thanks for the above! Where are you inserting the col-xs-push-6, col-xs-pull-6 – in the extra class name field?

Doesnt seem to be working for me 🙁 is it because I have 4 columns?

5 years ago kendall.cochrane
Participant

Hey! Don’t worry I have figured it out! Needed a “.vc_” added to the front – so:
.vc_col-xs-pull-6
.vc_col-xs-push-6

🙂 🙂 🙂

All working now – thanks for your support!

5 years ago themes2go
Keymaster

Glad it works! 🙂
If you have any other issues feel free to open a new ticket.

Best,
Andrea

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Reverse stacking – 4 column row’ is closed to new replies.

TIME FOR A BOOST!

You can already use the new helpdesk!

Community Forums

Reverse stacking – 4 column row