ENHANCEMENT - Mobile placement of press contact, other boxes

[khawkins98]

Noticed this while reading a news post on my phone: https://www.embl.org/news/science/new-insights-into-epigenetic-modifications/

It would be better if the "Press contact" box appeared lower on the mobile phone (bottom of post).

There are two "typical" methods to do this:

1. Add some kind of push/pull source ordering support to make left column show on the bottom on the mobile (this would also move the author info to the bottom)
2. Add the "press contact" a second time in the HTML, appearing at the bottom. Use CSS to show/hide accordingly, i.e.vf-u-grid--hide-for-small
3. Or, dodge it for now, and move the "Press contact" to the right

This will probably bubble up into some things for vf-core, but starting the journey here.

[sturobson]

4. drop the custom class article-left-col to the bottom using:

As there's 'no grid' on mobile we can use display: flex; up to the viewport size the grid kicks in.

@media (max-width: 1023px) {
  .embl-grid {
    display: flex;
    flex-direction: column;
  }
  .article-left-col {
    order: 2;
  } 
}

*notes:* doing this will effect all `embl-grid`s at these viewports - can we create something like `embl__news-article` on the body to hook into?

[sturobson]

asides:

• to me it's weird having the press contact information there and not at the bottom?
• should we be asking readers to share an article at the top of a page, before they'd potentially read it?
• would the author details be better placed after the headline? So we just have a single column of content?

This (image below) looks incredibly busy compared to our 'containerisation' of the rest of the site designs.

[sturobson]

related:

on - https://wwwdev.embl.org/groups/chemical-biology/ - the contact information is on the right.

Should we aim for some consistency betwixt the two too?