reverse – XTRA Tutorials https://xtratheme.com/docs Documentation of XTRA WordPress Theme Tue, 03 Sep 2024 10:03:44 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.2 How to Reverse WPBakery Columns on Mobile Devices? https://xtratheme.com/docs/how-to/how-to-reverse-wpbakery-columns-on-mobile-devices/ https://xtratheme.com/docs/how-to/how-to-reverse-wpbakery-columns-on-mobile-devices/#respond Tue, 04 Jun 2024 14:56:44 +0000 https://xtratheme.com/docs/?p=3252

Responsive

Step 1
Step01

WPBakery

Unfortunately, WPBakery doesn’t come with the option to reverse columns on mobile to make better responsive orders of content. However, by adding some simple CSS you can achieve this effect using CSS’s flexbox.

 

To get the reverse columns working:

  1. Add the reverse-col-on-mobile CSS class to the row you want to have columns reversed
  2. Add the CSS below into your themes additional CSS on Theme Options > Additional CSS
@media only screen and (max-width: 769px) {
	.reverse-col-on-mobile {
		display: flex !important;
		flex-direction: column-reverse;
	}
}
Reverse column wpbakery
]]> https://xtratheme.com/docs/how-to/how-to-reverse-wpbakery-columns-on-mobile-devices/feed/ 0