Tails Builder - Reversing Col or Row


Jan 28th, 2023 10:10 AM

Hello everyone,

I'm hoping to get some help with an issue I'm currently facing in the Tailwind Builder. I'm trying to flip the position of an image and its corresponding text within the layout, without having to make any changes to the underlying code. I'm working with a client who may not have a lot of experience with HTML or Tailwind CSS, and I want to make it as easy and user-friendly as possible for them. I've heard that using a "col-reverse" class could be one solution, but I'm hoping to find an alternative that's even more straightforward. Any suggestions or tips you may have would be greatly appreciated, thanks in advance!


Jan 30th, 2023 01:17 AM

Best Answer

Hey there!

Indeed you are correct! You can use flex-row-reverse to change the flex direction.

To do that, you can:

  • Click on the div that you want to reverse
  • On the right side, under Flexbox & Grid click on the 'Flexbox & Grid' dropdown
  • From the Dropdwon select flex-row-reverse

Here is a quick example:

In case you are interested, you can find more information about this in the Tailwind CSS docs here.

Hope that this helps!