Proper way to set up columns and rows

[newmoonstrategy]

Hi,
I am trying to figure out the best way to configure columns and rows on this development site: http://3.221.73.82/

If you scroll down to where it says “Board of Directors” and “Our Team”, it is displaying properly on desktop. However, when I look at the mobile view, the order is wrong - it needs to stay Board of Directors first, with the list beneath it, and THEN Our Team with the list beneath that.

I know it has something to do with rows and columns, but I am not sure how to set it up to make sure the order stays correct on mobile. Can you please assist? Thank you!

[ruenel]

Hello Kate,

Thanks for writing in! Your sections are displaying like this:

This is all because you have inserted two rows. In your first row, you have added the headlines. In your second row, you inserted the list. If you are going to resolve your issue, you will have to relocate the headlines above your list in the second row thus eliminating the need for the first row. If this does not make sense, kindly provide us access to your site so that we can check your settings and we will fix this for you. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[newmoonstrategy]

Hi,
This makes perfect sense, however, I did them as two separate rows because on desktop, the second row is split into 4 columns. So, I need a title that spans over columns 1 and 2, and a title that spans over columns 3 and 4. I did not see a way to do this without splitting them up into two rows. Is this a possibility?

[kory]

Howdy, @newmoonstrategy! Thanks for writing in and great questions…it can be tricky when first starting to work with Rows and Columns and trying to manage complex nested layouts like this. I think I understand what you’re going for here, and took some time to do a rough version of what you’re after, which I’m hoping will illuminate some helpful layout techniques while working through your design.

So for this particular situation to work the way you’re describing, I think you’ll want to go with something like this (take note that I have given each Column a slightly transparent background color in this example just to hopefully make it easier to track what’s going on, but you will obviously need to style your setup accordingly):

In the Outline to the left, you can see something like the following going on:

• Row
  • Column (groups the headline and nested content)
    • Headline
    • Nested Row
      • Column (repeat as necessary for how ever many people / positions there are)
        • Information

So basically, you have your first level Row which will have two Columns. Each of those Columns will group the Headline for that subgroups content, and then after that Headline will come a nested Row Element, which will feature it’s own sub-layout for structuring how the information in that section is laid out. Doing it this way gives us full control over both sets of data and keeps the grouped accordingly so that for our first-level Row, on our Desktop you can have something like this:

And then on a smaller screen, you can have it collapse to a single column layout, but since all your content is grouped in individual Columns, their order will be properly preserved:

Of course, you will also need to manage the internal layout of the nested Row accordingly, but hopefully this helps to give you a sense for how these pieces can start to all fit together. If you want to go a little more advanced, you might find a video I did a while back on creating “auto-responsive layouts” helpful. It’s not completely necessary to do what you’re after, but especially once more complex layouts like this start making their way into designs, it’s nice to have the technique in your back pocket.

Layout Tricks: Auto-Responsive Columns (Part 1)

Hopefully all this helps to point you in the right direction. Cheers!

[newmoonstrategy]

Hi Kory,
Thank you so much! This is exactly what I was trying to do and I was able to follow your instructions and get it to work on my development site. Thank you for your very detailed and helpful explanation! Have a great day!

[ruenel]

Hey Kate,

You are most welcome as always!

Cheers.