Responsive HTML/CSS to Send Text Below Form - html

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> </p>
<p> </p>
<p> </p>
<p> </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 />online#westga.edu • <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 & 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%;">Help</td>
<td style="width: 20%; border-left: 1px solid #D3D3D3;"> Resources </td>
<td style="width: 20%; border-left: 1px solid #D3D3D3;"> More Info</td>
<td style="width: 20%; border-left: 1px solid #D3D3D3;"> System Checker</td>
<td style="width: 20%; border-left: 1px solid #D3D3D3;"> eCampus, WebMBA, & EU</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!