title: Move title to the bottom with CSS
body: <p>How can I move the title to the bottom on screen on max-width 640px without changing the structure on the html file?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header-image {
    width: 100%;
    position: relative;
  }
  
  .header-title {
    color: #000000;
    font-size: 3em;
    font-weight: 700;
    position: absolute;
    top: 25%;
    width: 255px;
    right: 50px;
    text-align: left
  }
  
  .bottom-bar {
    display: block;
    height: 25px;
    width: 100%;
    background- color: #007cb0;
  }
  
  .screen-480 {
    display: none;
  }
  
  .screen-768 {
    display: block;
  }
  
  @media only screen and (max-width: 480) {
    .screen-480 {
      display: block;
    }
    .screen-768 {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header-image"&gt;
    &lt;div class="image"&gt;
      &lt;div class="header-title"&gt;The quick brown fox jumped over the lazy dog&lt;/div&gt;
      &lt;img src="http://via.placeholder.com/480x683.png" width="100%" class="screen-
      480" alt="img" /&gt;
      &lt;img src="http://via.placeholder.com/1028x550.png" width="100%" class="screen-
      768" alt="img" /&gt;
    &lt;/div&gt;
    &lt;div class="bottom-bar"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>