Blog

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!

31 Comments

  1. karan
    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.

    Reply

  2. Andreas S
    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 :)

    Reply

    • Kurt @ Themify
      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.

      Reply

  3. kuldeep sathwara
    Feb 24, 2018 @ 05:19

    Really Great features. i would to like use this features on my personal blog. thanks

    Reply

  4. Ajay
    May 21, 2018 @ 13:16

    Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.

    Reply

  5. Chirag
    Jul 16, 2018 @ 12:04

    Great features for mobile user. Thanks for sharing with us.

    Reply

  6. karan zale
    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

    Reply

  7. Raveena
    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.

    Reply

  8. Rahul
    Sep 25, 2018 @ 10:08

    Damn, this is something I was looking for Hours, Finally You helped me out Kurt
    Thank you soo Much

    Reply

  9. Marty
    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….

    Reply

    • Nick @ Themify
      Jan 29, 2019 @ 03:11

      You can configure the row grids for desktop, tablet, and mobile separately: https://themify.me/docs/builder#responsive-columns

      Reply

      • Marty
        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….

        Reply

  10. Mariyam
    Feb 10, 2019 @ 14:30

    Thanks for the information. I really needed this since I do most of my online work through the phone.

    Reply

  11. Rishav
    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.

    Reply

  12. 192.168.1.1
    Mar 12, 2019 @ 18:14

    Is this method is still working? Because recently I have tried this but it didn’t work at all.

    Reply

  13. Richard Groover
    Apr 16, 2019 @ 05:03

    Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.

    Reply

  14. 192.168.1.1
    Apr 22, 2019 @ 08:07

    Is there any theme which is fully responsive for mobile?

    Reply

    • Cecilia @ Themify
      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!

      Reply

  15. BMF
    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.

    Reply

  16. Jessica jhonson
    Jun 29, 2019 @ 06:40

    Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.

    Reply

  17. Sunny Kumar
    Jul 03, 2019 @ 05:39

    Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.

    Reply

  18. Abhishek Gupta
    Jul 18, 2019 @ 05:48

    Is this feature is better than visual composer WordPress plugin feature?

    Reply

    • Csaba @ Themify
      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.

      Reply

  19. Emma Davis
    Oct 01, 2019 @ 12:24

    Can you suggest any theme which is completely responsible for mobile.

    Reply

    • Csaba @ Themify
      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.

      Reply

  20. Peter Deski
    Oct 28, 2019 @ 14:46

    Is this method is still working? Because recently I have tried this but it didn’t work at all.

    Reply

  21. Sunny Bundel
    Jan 28, 2020 @ 11:20

    Very impressive feature for the mobile user. I will apply this feature in my personal blog to.. again thanks.

    Reply

  22. Butler
    Apr 08, 2020 @ 12:31

    Is there any way to use column direction on the desktop

    Reply

  23. Richard Groover
    Aug 15, 2020 @ 07:35

    Thanks for the information. I really needed this since I do most of my online work through the phone.

    Reply

  24. Markus
    Feb 06, 2022 @ 20:19

    Nice feature and tutorial very well done! Super helpful! Thank you, great job! (Music could really be spared though 😉)

    Reply

Reply