On that page of the website, the columns become 100% width when at 767px or less. I would like to switch the order of the columns so the siderbar menu will show at the top instead of at the bottom.

To achieve that, I tried using display: flex on the parent container and order: 1 and order: 2 for the two columns.

It works and the columns do switch at that screen width, but the columns are not visually 100% anymore, even though they say 100% in css.

I need them to be 100% width visually and the text column to go under the sidebar column.

Also, it will be great if an explanation of why that happens can be provided, so I can learn from this.

Thanks!

Hi,

The flex-direction: column fixed the issue!

Thanks!