Responsive HTML/CSS to Send Text Below Form

Question

I am working on creating a responsive log in page. I have section of text in a table to provide some quick information for users prior to them logging in. The problem is that when the screen/window size gets smaller, the log in form overlaps/covers the text. I would like for the text to move down below the login form when the screen shrinks, but I am not exactly sure how to do that. I was able to get the logo image at the top and the links menu to respond to size changes using "max-width" CSS properties, but cannot figure out how to move something to another part of the page. The HTML/CSS that I am working with is pasted below and I have attached a screenshot from my phone showing the overlap issue. I know the HTML/CSS isn't ideal, but I am having to do this in a very limited editor. Any help is much appreciated.

<p><img src="https://www.westga.edu/uwgonline/assets-uwgonline/pics/CourseDen.png" style="z-index: -1; margin: 0% 1.5%; max-width: 1100px; width: 90%; position: absolute; height: auto;" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table style="z-index: -1; opacity: 0.85; max-width: 100%; width: 50%; left: 35%; top: 380px; position: absolute;">
    <tbody>
        <tr>
            <td style="padding: 20px; background: #FFFFFF;">
                <p>
                    <span style="color: #000000;">
                    <span style="color: #000000;">
                        <em>Please note your password is the same as your <strong>UWG ID</strong> and is case sensitive.</em>
                    </span>
                    </span>
                </p>
                <strong><span style="color: #000000;">UWG Online Help Desk</span></strong>
                <br />
                <span style="color: #000000;">(M-F 8a-5p ET) 678-839-6248 or 1-855-933-8946</span>
                <br /><a href="mailto:online@westga.edu">online@westga.edu</a> &bull; <a rel="noopener noreferrer" href="http://uwgonline.westga.edu/uwgonline/chat-with-us.php" target="_blank">Chat</a>
                <p><strong><span style="color: #000000;">24/7/365 D2L Help Center</span></strong>
                    <br /><span style="color: #000000;">Knowledge Base &amp; Live Support</span>
                    <br /><a rel="noopener noreferrer" href="https://D2Lhelp.view.usg.edu" target="_blank">https://D2Lhelp.view.usg.edu</a></p>
            </td>
        </tr>
    </tbody>
</table>
<hr />
<table style="max-width: 100%; width: 99%; text-align: center; border: none; border-collapse: collapse;">
    <tbody>
        <tr>
            <td style="width: 20%;"><a href="https://uwgonline.westga.edu/uwg-online-contact-us.php" target="blank" style="color: #777777;">Help</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://uwgonline.westga.edu/uwg-online-student-help.php" target="blank" style="color: #777777;"> Resources </a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="http://uwgonline.westga.edu/" target="blank" style="color: #777777;"> More Info</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://westga.view.usg.edu/d2l/systemCheck" target="blank" style="color: #777777;"> System Checker</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://go.view.usg.edu/" target="blank" style="color: #777777;"> eCampus, WebMBA, &amp; EU</a></td>
        </tr>
    </tbody>
</table>
<hr />

Answer 1

The answer to my problem was to take the text that is getting stuck behind the login box and remove it's position: absolute . This put the login box below it. What we really wanted was the login box to the left of the text and only moved down below it when a screen/window was under a certain size, but because I cannot edit the login box, this is the solution that we decided was going to be the best for what we had access to edit. That you @Sirence for mentioning the position: absolute information in your comment!