Flex Row switching to be column on mobile is problematic

The Flex Row component switches to flex direction = column starting tablet size and smaller.
https://github.com/LLK/scratch-www/blob/9b94849de6e1f40a687b68433e76ff3e0ba4f6dc/src/components/flex-row/flex-row.scss#L29
This is often not the preferred OR expected behavior. But Flex Row is being used in many places so just simply changing the code in the flex row css would maybe be risky. This has lead to workarounds such as declaring extra classes and appending them to a flex row component to actually preserve the row, or many media queries on the new project page.

What I expect of Flex Row is that it only becomes a column on mobile if it is &column or maybe &column-mobile. Maybe a new component FlexTrueRow is needed if changing Flex Row itself is too annoying. Or just add a part to the flex row css that is like

media query stuff {
  .preserve-row-on-mobile {
    flex-direction: row;
  }
}

and add this class to all places where workarounds via media queries and extra classes have been used.

Ref https://github.com/LLK/scratch-www/pull/2135#pullrequestreview-161201022

Start with src/components/flex-row/flex-row.scss at the linked media-query rule, then inspect the Flex Row usages and the workarounds referenced in the issue and PR 2135 review. Resolve which mobile behavior is intended before changing the component, and consider the affected usages complete when they no longer require separate row-preserving media-query workarounds.