Problem on RTL site

Beaver Builder
1

I’m using BB for the first time and I’m creating a site in RTL (Hebrew)
I inserted a 3-column row and then inserted the content.
It looks great on a desktop but on mobile it’s stacking the 3rd column on top - apparently because in LTR the first column on the left would be the first column of content. But I need it to work the other way - the first column on the right should go on top.
This is the page in question:
http://giyur.org.il/תהליך-הגיור/
Please let me know how I can make sure that RTL is working properly in BB.
Thanks
Naomi

2

Hey Naomi,

Sorry for the delay. Just letting you know that we are looking into this and will get back to you shortly.

Thanks!

KC

3

Hey Naomi,

Unfortunately, it works that way because that’s how those columns are stacked in the markup. It’s possible to change the order with Flexbox if you’re comfortable with CSS, but we don’t have a way in Beaver Builder yet. That is a feature that we plan on working on soon. Sorry I don’t have a better answer at this time.

Justin

4

thanks for getting back to me.
I’m very comfortable in CSS.
Can you give instructions?

5

Sure thing! Here’s some flexbox CSS that will reverse the order of all three column rows. It will, however, probably affect all rows, so you’ll need to get a little more specific with your targeting. You will probably need to adjust for rows that have more/less than three columns as well. Let me know if you have any questions about that.

@media (max-width: 768px) {

	.fl-col-group {
		-ms-box-orient: horizontal;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -moz-flex;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
	}
	.fl-col:nth-of-type(1) { 
		order: 3; 
	}
	.fl-col:nth-of-type(2) { 
		order: 2; 
	}
	.fl-col:nth-of-type(3) { 
		order: 1; 
	}
}

Justin

6

Actually, this should work for everything. No adjustment needed!

@media (max-width: 768px) {

	.fl-col-group {
		-ms-box-orient: horizontal;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -moz-flex;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
	}
	.fl-col:nth-of-type(1) { order: 12; }
	.fl-col:nth-of-type(2) { order: 11; }
	.fl-col:nth-of-type(3) { order: 10; }
	.fl-col:nth-of-type(4) { order: 9; }
	.fl-col:nth-of-type(5) { order: 8; }
	.fl-col:nth-of-type(6) { order: 7; }
	.fl-col:nth-of-type(7) { order: 6; }
	.fl-col:nth-of-type(8) { order: 5; }
	.fl-col:nth-of-type(9) { order: 4; }
	.fl-col:nth-of-type(10) { order: 3; }
	.fl-col:nth-of-type(11) { order: 2; }
	.fl-col:nth-of-type(12) { order: 1; }
}

I’m going to make a note to get that added in the next update.

Justin

7

That worked perfectly.
The columns are now in the correct order on mobile.
Thanks so much!
Naomi

8

You’re welcome! We’ll be sure to get that in a future release.

Justin