20 Dec 2017
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!
Jan 04, 2018 @ 14:37
Very impressive feature for mobile user.I would like to implement this on our company website for presenting information in more professional manner.
Feb 07, 2018 @ 11:01
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 :)
Feb 07, 2018 @ 18:58
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.
Feb 24, 2018 @ 05:19
Really Great features. i would to like use this features on my personal blog. thanks
May 21, 2018 @ 13:16
Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.
Jul 16, 2018 @ 12:04
Great features for mobile user. Thanks for sharing with us.
Aug 04, 2018 @ 16:32
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
Aug 23, 2018 @ 06:37
I started using this feature and it really made me install the builder on other sites of mine.
Thanks for the video tutorials.
Sep 25, 2018 @ 10:08
Damn, this is something I was looking for Hours, Finally You helped me out Kurt
Thank you soo Much
Jan 27, 2019 @ 18:09
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….
Jan 29, 2019 @ 03:11
You can configure the row grids for desktop, tablet, and mobile separately: https://themify.me/docs/builder#responsive-columns
Feb 01, 2019 @ 13:38
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….
Feb 10, 2019 @ 14:30
Thanks for the information. I really needed this since I do most of my online work through the phone.
Feb 22, 2019 @ 06:17
Now handing rows and columns on the mobile phone has become so easy..And it only happened because of you. Thanks a lot.
Mar 12, 2019 @ 18:14
Is this method is still working? Because recently I have tried this but it didn’t work at all.
Mar 14, 2019 @ 14:04
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).
Apr 16, 2019 @ 05:03
Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.
Apr 22, 2019 @ 08:07
Is there any theme which is fully responsive for mobile?
Apr 22, 2019 @ 19:25
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!
Jun 18, 2019 @ 03:55
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.
Jun 29, 2019 @ 06:40
Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.
Jul 03, 2019 @ 05:39
Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.
Jul 18, 2019 @ 05:48
Is this feature is better than visual composer WordPress plugin feature?
Jul 18, 2019 @ 16:35
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.
Oct 01, 2019 @ 12:24
Can you suggest any theme which is completely responsible for mobile.
Oct 03, 2019 @ 21:21
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.
Oct 28, 2019 @ 14:46
Is this method is still working? Because recently I have tried this but it didn’t work at all.
Jan 28, 2020 @ 11:20
Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.
Apr 08, 2020 @ 12:31
Is there any way to use column direction on the desktop
Aug 15, 2020 @ 07:35
Thanks for the information. I really needed this since I do most of my online work through the phone.
Feb 06, 2022 @ 20:19
Nice feature and tutorial very well done! Super helpful! Thank you, great job! (Music could really be spared though 😉)