move words into a specific area

Problem- How to move the line from this example below "Hi I'm a developer that loves clean & elegant code"

From this position

https://i.sstatic.net/UgrC9.png

into this position

https://i.sstatic.net/6yEMO.png

HTML of the section (the order of anything isn't allowed to be changed EX.cant just move "Hi, I'm a developer..." right above the "A little bit about me" line)

<body>
   <header>
     <div class="full-width">
       <div class="half-width">
         <h1>Jubilee Austin</h1>
       </div>
       <div class="half-width">
         <h2><span>Hi,</span> I'm a developer that loves clean &amp; elegant code.
         </h2>
         <nav>
           <ul>
             <li><a href="#about">About</a></li>
             <li><a href="#work">Work</a></li>
             <li><a href="#contact">Contact</a></li>
             </ul>
         </nav>
       </div>
     </div>
   </header>
   <main>
     <section id="about">
       <div class="full-width">
         <h2>A little bit about me</h2>
         <div class="half-width">
           <p> I've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
         </div>
           <div class="half-width">
             <p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom &amp; versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
           </div>
           </div>
     </section>

Entire CSS

/****Base syles***/
body {
  font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
  height: 600px;
  border: solid red;
}
/***Grid***/
.full-width{
  width:1200px;
  margin: 0 auto;
}
.half-width{
  width:600px;
  float:left;
}
.third-width{
  width:400px:
  float:left;
}
/***About specific***/
#about .full-width{
  padding:80px 0;
}
#about h2{
  font-family: 'Lora', serif;
  font-size:36px;
  color:#262a2b;
}

#about p{
  font-size:21px;
  color:#7f7f7f;
  line-height:42px;
  padding-right:50px;
}

Solution

Update:

The example below has been updated to a pure CSS solution to your use case in regard to keeping the document structure the same. Here is the relevant tidbit:

@media (max-width: 1234px) {
  .hi {
    left: 10px;
  }
}

@media (min-width: 1235px) {
  .hi {
    left: calc(50% - 600px);
  }
}

.hi {
  position: absolute;
  top: 60px;
}

Notes:

position: absolute is used to move the element out of the normal document flow to where it is needed.
@media queries are used to match your width settings.
the odd numbers 1234px/1235px are calculated from when you width exceeds that specified in your .full-width class. It combines the 1200px of your specified full width with 20px from the browser scroll bar and 14px/15px from the default margin applied to the document body.

See and run the code below to see that it satisfies your use case:

/****Base syles***/
body {
  font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
  height: 600px;
  border: solid red;
}
/***Grid***/
.full-width{
  width:1200px;
  margin: 0 auto;
}
.half-width{
  width:600px;
  float:left;
}
.third-width{
  width:400px;
  float:left;
}

@media (max-width: 1234px) {
  .hi {
    left: 10px;
  }
}

@media (min-width: 1235px) {
  .hi {
    left: calc(50% - 600px);
  }
}

.hi {
  position: absolute;
  top: 60px;
}

/***About specific***/
#about .full-width{
  padding:80px 0;
}
#about h2{
  font-family: 'Lora', serif;
  font-size:36px;
  color:#262a2b;
}

#about p{
  font-size:21px;
  color:#7f7f7f;
  line-height:42px;
  padding-right:50px;
}

<body>
   <header>
     <div class="full-width">
       <div class="half-width">
         <h1>Jubilee Austin</h1>
       </div>
       <div class="half-width">
         <h2 class='hi'><span>Hi,</span> i'm a developer that loves clean &amp; elegant code.</h2>
         <nav>
           <ul>
             <li><a href="#about">About</a></li>
             <li><a href="#work">Work</a></li>
             <li><a href="#contact">Contact</a></li>
             </ul>
         </nav>
       </div>
     </div>
   </header>
   <main>
     <section id="about">
       <div class="full-width">
         
         
         <h2>A little bit about me</h2>
         <div class="half-width">
           <p> i've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism.As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
         </div>
           <div class="half-width">
             <p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom &amp; versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
           </div>
           </div>
     </section>

Old solution: You can just move the <h2><span>Hi,</span> i'm a developer that loves clean & elegant code.</h2> line to right before the <h2>A little bit about me</h2> segment.