Reverse column in visual editor


I have this column:

How is it possible if I want to reverse the column order.

What css class should I add, or what should I add to this?
Please let me know, thanks!

Hey @radikris there are a few ways you could achieve this, but it might be helpful to know your exact use case?

I assume this is something for responsive design, e.g. stacking in reverse order at a certain breakpoint. If that is the case, our Column element has a Reverse columns when stacked toggle under the Advanced Options section of the option tab:


If this is not to stack the columns, the easiest way would be to use flex-direction in the custom CSS window. Our Column elements use flex-box for styling, and the parent wrapper has a class builder-columns already applied out of the box. If you want to change the order, you could use something like:

.builder-columns {
  flex-direction: row-reverse; //or column-reverse

to acheive the same effect. Try either of those out and let me know if one works for you!


Yes, the global css worked, but maybe that not my usecase.

I have a symbol, a hero:
inside a column: left text, right image,
and I have a model entry with a boolean reversed, and I would like to bind dynamically this css to my column

Something like:
If the ‘flexDirection: ? row-reverse : row’, or something like that, but if I select the column in the layers, and add the flexDirection to row-reverse it is not the expected behaviour.

How could I solve this with this type of dynamic binding?

Thanks for your help @TimG , always appreciate it!

@radikris the easiest way for this I think is again to use the global CSS since we dont directly have access to classes and styling of the builder-columns class within the UI.

What I did, was on the Columns parent, I put a conditional data binding to set a class on the Columns element based on whether isReversed is true or not, something like:

state.isReverse ? 'reversed' : '';
Screen Shot 2022-03-01 at 3.59.45 PM

This will add the class reversed to the element if isReversed is true and nothing if false. From there I just updated the global CSS I mentioned above:

.reversed .builder-columns {
 flex-direction: row-reverse;

I made the update to you herosymbol NEW content page, check it out and see if that works for you!

worked like a charm, thank you very much!

@TimG A little help for this again, as you can see the reversed is worked, but the gap between the columns would not goes between the heroes. it will stay as a left padding but it is not on the right side anymore. how can we fix it?

Hey @radikris I think for this you would have to again rely on the custom CSS. You could put something like below:

Screen Shot 2022-03-03 at 2.36.03 PM

test it out to find your exact layout