title: How to get whole part of a sentence to move down on resize
body: <p>I have a sentence in h1 tag. On resize I want the last three words to jump down together not just one at a time, since the last three words are a tagline and it wouldn't make sense if they get separated. <a href="http://update.mrskitson.ca" rel="nofollow">Here</a> is the live site.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;header class="header" role="banner"&gt;
      &lt;div id="inner-header" class="wrap clearfix"&gt;
         &lt;div id="title"&gt;
         &lt;!-- to use a image just replace the bloginfo('name') with your img src and remove the surrounding &lt;p&gt; --&gt;
          &lt;h1 id="logo" class="h1"&gt;
                  &lt;a href="&lt;?php echo home_url(); ?&gt;" rel="nofollow"&gt;
                      &lt;?php bloginfo('name'); ?&gt;&lt;span class="subtitle"&gt;
                      &lt;?php bloginfo('description'); ?&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/h1&gt;
         &lt;/div&gt;
      &lt;nav role="navigation"&gt;
         &lt;?php bones_main_nav(); ?&gt;
      &lt;/nav&gt;
  &lt;/div&gt; &lt;!-- end #inner-header --&gt;
  </code></pre>
  
  <p> </p>
  
  <p>and the scss:</p>
  
  <pre><code>.header {
      #title {
          @include span-columns(23 ,24); 
          position: absolute; 
          top: 30px;
          text-align: center;
      }
      .subtitle {
          font-size: 0.3em; 
          margin-left: 1em;
      }
      .nav { 
          @include span-columns(24 omega ,24); 
          margin-top: 289px;
      }
      #logo {
          a { 
             color: #fff; 
             font-family: 'Pacifico', cursive; /*font-size: 2.5em;*/ 
             text-shadow: 0px 0px 0 #B6CEBF,
                          0.707px 0.707px 0 #B6CEBF,
                          1.414px 1.414px 0 #B6CEBF, 
                          2.121px 2.121px 0 #B6CEBF, 
                          2.828px 2.828px 0 #B6CEBF, 
                          3.536px 3.536px 0 #B6CEBF, 
                          4.243px 4.243px 0 #B6CEBF, 
                          4.95px 4.95px 0 #B6CEBF, 
                          5.657px 5.657px 0 #B6CEBF, 
                          6.364px 6.364px 0 #B6CEBF, 
                          7.071px 7.071px 0 #B6CEBF;
          }
      }
  }
  </code></pre>