Learn How to Reorder Columns on Tablet or Mobile with Column Direction
Responsive styling or responsive web design is an approach that makes websites render well on a variety of devices and screen sizes. It is becoming an increasingly important feature for all websites as mobile traffic now accounts for more than half of total internet traffic.
In the next few series of video tutorials, we wanted to highlight some key features for the Builder and its responsive styling elements.
Today’s video tutorial is about Column Direction. It’s a useful feature especially when you’re adjusting the look of your website on mobile or tablet view. Watch the video below, or read on for more!
If your website implements two or more columns on desktop view, you will notice that as you resize your window or change to a mobile or tablet device, your columns will become stacked on top of each other. Sometimes this results in a strange flow of content especially if you have a picture stacked on top of another picture, or two text boxes right after the other.
To change this, simply switch the direction of a set of columns. This can then reorder the content to display a picture on top of a text box, or vice versa.
Try the Column Direction feature today and reorder your content to your heart’s desire!
January 4, 2018 @ 2:37 pm
Very impressive feature for mobile user.I would like to implement this on our company website for presenting information in more professional manner.
February 7, 2018 @ 11:01 am
Good video, great feature, but it doesn`t works…
if i change the collum direction in the mobile interface, it also changes the desktop interface.
i have saved between the two steps..
I have tried it with ultra and shoppe.. also my mobile interface looks differnt than your video!
everthing on the newest version.
Thank You :)
February 7, 2018 @ 6:58 pm
Hello,
Yes, we’re actually using a new framework for this video tutorial. But not to worry, we’re releasing the update for this framework very soon :) For now however, please allow me to help. Do you mind contacting us here – https://themify.me/contact and include your site URL. Even with the current framework it should work as well.
Thank you for your patience.
February 24, 2018 @ 5:19 am
Really Great features. i would to like use this features on my personal blog. thanks
May 21, 2018 @ 1:16 pm
Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.
July 16, 2018 @ 12:04 pm
Great features for mobile user. Thanks for sharing with us.
August 4, 2018 @ 4:32 pm
very user friendly feature for mobile.This will certainly improve user experience on the mobile phone.
I would like to give it a try.
thanks for sharing
August 23, 2018 @ 6:37 am
I started using this feature and it really made me install the builder on other sites of mine.
Thanks for the video tutorials.
September 25, 2018 @ 10:08 am
Damn, this is something I was looking for Hours, Finally You helped me out Kurt
Thank you soo Much
January 27, 2019 @ 6:09 pm
Thank you for this useful option!!
What is the best way to handle rows with three columns on mobile? When I use the builder, change the view to mobile and e.g. manually stack the three parts on one another, the desktop version also changes….
January 29, 2019 @ 3:11 am
You can configure the row grids for desktop, tablet, and mobile separately: https://themify.me/docs/builder#responsive-columns
February 1, 2019 @ 1:38 pm
Thank you for the tip! But I used that function and reordered all text which caused the Desktop version to change as well. Guess, I’ll have to find another way to sedign that page. Strange….
February 10, 2019 @ 2:30 pm
Thanks for the information. I really needed this since I do most of my online work through the phone.
February 22, 2019 @ 6:17 am
Now handing rows and columns on the mobile phone has become so easy..And it only happened because of you. Thanks a lot.
March 12, 2019 @ 6:14 pm
Is this method is still working? Because recently I have tried this but it didn’t work at all.
March 14, 2019 @ 2:04 pm
Hi there,
If you’re experiencing any issues, please don’t hesitate to reach out to us via the Support Forum (https://themify.me/forum) or contact page (https://themify.me/contact).
April 16, 2019 @ 5:03 am
Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.
April 22, 2019 @ 8:07 am
Is there any theme which is fully responsive for mobile?
April 22, 2019 @ 7:25 pm
Hi there,
All of our themes have responsive styling enabled. You can even edit while seeing it in the live preview mode of choice including tablet landscape, tablet portrait, or mobile!
June 18, 2019 @ 3:55 am
If your website implements two or more columns on desktop view, you will notice that as you resize your window or change to a mobile or tablet device, your columns will become stacked on top of each other. Sometimes this results in a strange flow of content especially if you have a picture stacked on top of another picture, or two text boxes right after the other.
June 29, 2019 @ 6:40 am
Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.
July 3, 2019 @ 5:39 am
Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.
July 18, 2019 @ 5:48 am
Is this feature is better than visual composer WordPress plugin feature?
July 18, 2019 @ 4:35 pm
Hi Abhishek,
Sorry, but I couldn’t find the Column Direction option in the latest Visual Composer ( now WPBakery Page Builder ) plugin, so I think with Visual Composer this is not possible.
October 1, 2019 @ 12:24 pm
Can you suggest any theme which is completely responsible for mobile.
October 3, 2019 @ 9:21 pm
Hi Emma,
All of our themes and responsive, but I would suggest Ultra Theme: https://themify.me/themes/ultra as it is our most versatile theme and we have the most theme and customization options.
October 28, 2019 @ 2:46 pm
Is this method is still working? Because recently I have tried this but it didn’t work at all.
January 28, 2020 @ 11:20 am
Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.