$ still not defined after moving jQuery file to head

I've explored reasonable remedies found here and elsewhere, but for for some reason cloud9 does not want to let me play with jQuery. I started with the "links at the bottom approach," got the $ not defined please fix or add /*global $*/ error (even though my code was in $(document).ready(function () {}); ), then moved everything up to the <head> tag so that there was no way my script could try to run before jQuery was loaded. Still, the same error. What gives?

Note I also tried reversing the order of the bootstrap and google jQuery links. Also, very new at front-end dev. Thx.

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- Bootstrap Links -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- style -->
        <style>
            .container-fluid {
                font-family: Serif, Helvetica;
                background-color: #8A2BE2;
                color: #FFFFFF;
            }

            #container-top {
                height: 75vh;
                margin: 50px 50px 50px 50px;
                background-color: #000000;
                color: #FFFFFF;
                font-size: 50px;
            }

            /* word-wrap added to ensure quote remained in container */
            .quote {
                font-family: Serif, Helvetica;
                word-wrap: break-word;
            }

            /*
            .vertical-align {
                display: flex;
                align-items: center;

            }
            */

        </style>
        <!-- scripts -->
        <script>
            $(document).ready(function () {

            });

        </script>
    </head>
    <body>
        <div class="container-fluid">

Solution

got the $ not defined please fix or add /global $/ error (even though my code was in $(document).ready(function () {}); )

It means something else removes $ reference to jQuery. To avoid it in document ready handler, you can pass explicit alias:

$(document).ready(function ($) {
  // now '$' refers to jQuery inside ready handler even if '$' has been overwritten by other code
});