“Responsive design” is largely about CSS - designing the site layout “mobile first” and using media queries to re-style for wider displays.

Responsive Design with CSS (code)

But you yourself have stated that

but responsive is not always the right answer, nor mobile first design

and when it isn’t, the usual (easier) solution is usually to go with different URLs typically split by domains www.wombatcoffee.com vs m.wombatcoffee.com.

Github seems to use the User-Agent request header to route the request, though it allows that to be overridden by posting a token to /site/mobile_preference which I guess creates a cookie that overrides the request header.

So as you can see using the same URL but not relying on “mobile first” responsive design can get a bit involved.

<form class="js-mobile-preference-form" action="/site/mobile_preference" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="✓">
  <input type="hidden" name="authenticity_token" value="blahblah==">
  <input type="hidden" name="mobile" value="false">
  <input type="hidden" name="anchor" class="js-mobile-preference-anchor-field">

  <button type="submit" class="switch-to-desktop" data-ga-click="Mobile, switch to desktop, switch button">
    Desktop version
  </button>
</form>

So we’re basically back to

A simpler hybrid solution could use the user agent on a (mobile first, responsive design) landing page to populate the links (/... vs /m/...) but everywhere else use separate URLs for the desktop and mobile versions.

Why similar? What is preventing you from using a Scoped Route for “mobile”.