Google Apps Script not loading jquery mobile css

I'm trying to learn to use jquery mobile with Google Apps Script, and my hosted page isn't loading the CSS for it, it seems like. This code should have a gray header and footer bar, and if I copy and paste the dev data-page section, it should still only show up once. Neither of those things happen.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Testing</h1>
      </div>
      <div data-role="main" class="ui-content">
        <h1>Hello, World!</h1>
        <p>Welcome to my page</p>
      </div>
      <div data-role="footer">
        <h2>Testing More</h2>
      </div>
    </div>
  </body>
</html>

What am I missing to make this work?

Note: I also tried with jquery 2.2.4 instead of 3.4.1.. no difference...

Solution

Figured it out... it's two part:

First, the hosted version of jquery mobile is 1.4.5, which is still incompatible with jquery 3.

Second, jquery has to be loaded BEFORE jquery mobile, so it had to go above it on the page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">