move Recommendations and Permissions cards; set to 3 columns

[eviljeff]

Fixes mozilla/addons#15631 and fixes mozilla/addons#15627

Moves Recommendations (aka Other popular extensions) and Permissions cards to their eventual final position in the new detail page layout.

Also adjusts the number of columns to match figma (2 at large, 3 at extraLarge) - and repeats that style adjustment for the extensions by author card for consistency (author card is not shown on the figma, so it remains at it's old position, at the bottom of the page)

medium/500px

large/720px

extraLarge

extraExtraLarge

[KevinMind]

General purpose nit for the screenshots in the description:

• use ## headers so you get the description and a line break to easily know when one screenshot ends and another starts
• specify an absolute width value on the html tag and set height to auto, otherwise it distorts the image and makes it too big.
• make the screenshots focus on the main part of the screen you want to represent, I have to do a ton of scrolling to see the relevant part and I almost get lost or forget what I'm comparing by the time I find the same section in the next screenshot.

Felt appropriate to add this to the PR template if you agree?

[eviljeff]

General purpose nit for the screenshots in the description:

* use ## headers so you get the description and a line break to easily know when one screenshot ends and another starts

On my machine I already had line breaks? I.e. the text and images were always on different lines, so it was clear where one screenshot ended and another starts. Headings are nicer, I won't disagree, but not essential.

* specify an absolute `width` value on the html tag and set height to auto, otherwise it distorts the image and makes it too big.

yes it's weird that github doesn't do this

* make the screenshots focus on the main part of the screen you want to represent, I have to do a ton of scrolling to see the relevant part and I almost get lost or forget what I'm comparing by the time I find the same section in the next screenshot.

I would do that - and have done for previous prs you've reviewed - but in this case the fix in the pr is the layout, so I had to include the whole screen to demonstrate the layout (and I manually cropped off the footers).

Felt appropriate to add this to the PR template if you agree?

I don't think screenshot instructions are a priority, compared to the project this issue is a part of.

[KevinMind]

Verified