How to stack elements in footer


I have read the following post which explains how to stack container items by using column ie Bar > Flex Layout > Layout and select Column.

However, this works fine when you wanted to stack all containers in the bar but I would like to have 2 containers be aligned in a row (see my current footer with a logo and social media) and other 2 different containers (see text and button) stacked under those first 2 containers. At present, I have added the second 2 containers to a second bar…but this is not the result i was looking for. Or if that is not possible, how would I go about aligning the second footer bar over the first footer bar to get those items positioned underneath?

I would like to have the second 2 containers (text & button) within the one bar but stacked underneath the first 2 containers.
How can I achieve this? any help much appreciated.


Hi Ben,

Thank you for writing in, first please set your Bar to wrap children

Then set the Flex Basis of the 3rd and 4th container to 100%

That should keep the 1st and 2nd container inline, and wrap the 3rd and 4th container underneath.

More details about flexbox.
Using Flexbox
A Complete Guide to Flexbox

Hope it helps,

Thanks @friech

I just would like to clarify. You said "set your Bar to warp children but I see that your screenshot is warping the children on a Container but the outer Bar! So I am a little confused.

If it is to warp children on Container, then do I need to do that on each and ever Container?


Hi Ben,

Sorry about that screenshot, I do really mean Bar where your containers are.

Containers are the child of the Bar, so you’re telling the Bar to wrap its containers.


Thank you @friech

That worked as you outlined. And I appreciate the links to more info about Flexbox. That helped me understand how it works. Thank again. :grinning:

Best regards,

You’re most welcome, Ben.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.