Move handbook meta info inside complementary landmark

[renintw]

Closes #400.

This PR moves the handbook meta above the chapter list in the HTML hierarchy and then uses flex order to visually place it below the chapter list, and also adding a dividing line between them.

Below is a screencast that shows when entering the complementary landmark, the screen reader first reads the handbook content and then the chapter list, which I suppose meets the request. Regarding the desktop view and @jasmussen's question about how it would look in mobile view when the three columns just became rows, could @WordPress/meta-design take a look and give some feedback?

https://github.com/WordPress/wporg-developer/assets/18050944/ff0604a9-a5e4-4bd4-863b-40627498b4bf

[ryelle]

This introduces a difference between source order and visual order, so when tabbing through, the focus moves to the meta before the chapter list. This works for sighted mouse users & non-sighted keyboard users, but could be confusing for anyone sighted using keyboard nav or a screen reader. Especially when the meta is pushed down the screen by the Chapter list, the focus jumps around a lot.

https://github.com/WordPress/wporg-developer/assets/541093/813df9d2-4737-40ff-9526-63b72ca3df12

This is worse on small screens, since the chapter list is already pulled out of order, it jumps up and down.

https://github.com/WordPress/wporg-developer/assets/541093/87d40b75-8e15-4250-ba8d-d6bd515236c2

Maybe it could be moved to after the Chapters list in the source as well?

[jasmussen]

The source order & visual order is the challenge at hand here, because visually it looks nice. The main challenge here is that hierarchically, ideally we have chapters > toc > content. Across desktop that's a row of 3 columns, on mobile it's a stack of 2 collapsed elements (chapters and docs in thar order), and then content.

Can the meta info live inside the chapters element? Would that thread the needle?