title: Make div responsive at certain screen size
body: <p>I want that at different screen sizes for example at 480px width and lower that the #homepageRightImg goes under #homepageLeftImg. This is the code that I'm using, but it doesn't seem to be working. What am I missing or doing wrong?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>        &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /&gt;    
  &lt;link href="assets/css/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;!--[if IE 8]&gt;&lt;body class="ie8"&gt;&lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt;&lt;body&gt; &lt;!--&lt;![endif]--&gt;
  
  &lt;div id="homepageContentGlobal" class="homepageContentGlobal" style="display:none"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  
          &lt;div id="homepageLeftNav" class="homePageNav"&gt;
              &lt;div class="content" id="homepageLeftMenuTitle"&gt;
                  &lt;p class="title"&gt;My&lt;br&gt;Test&lt;/p&gt;
                  &lt;div class="subTitle"&gt;
                        &lt;a href="http://www.google.com/" class="button"&gt;Learn more&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="homepageLeftTitle" class="homepageTitle"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div id="homepageRightNav" class="homePageNav"&gt;
             &lt;div class="content" id="homepageRightMenuTitle"&gt;
                  &lt;p class="title"&gt;My&lt;br&gt;Title&lt;/p&gt;
                  &lt;div class="subTitle"&gt;
   &lt;a href="http://www.google.com/" class="button"&gt;Learn more&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="homepageRightTitle" class="homepageTitle"&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;div&gt;
          &lt;ul id="homepageLeftImg" class="homepageCol"&gt;
  &lt;li&gt;&lt;img src="test.jpg"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="test.jpg"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="test.jpg"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="test.jpg"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="test.jpg"/&gt;&lt;/li&gt;
         &lt;/ul&gt;
  
  
  &lt;ul id="homepageRightImg" class="homepageCol"&gt;
  &lt;li&gt;&lt;img src="test.jpg"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="test.jpg"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="test.jpg"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="test.jpg"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="test.jpg"/&gt;&lt;/li&gt;       &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>     .homepageContentGlobal {
          position: fixed;
          z-index: 98;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
       }
      .homepageCol li {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
          display: block;
       }
  
       #homepageLeftImg {
          position: absolute;
          top:0;
          left: 0;
          bottom: 0;
          right: 50%;
          width: 50%;
          height: 100%;
      z-index: 0;
          overflow: hidden;
       }
  
       #homepageRightImg {
          position: absolute;
          top:0;
          right: 0;
          left: 50%;
          width: 50%;
          height: 100%;
          overflow: hidden;
      }
  
       #homepageLeftNav {
          position: absolute;
          left: 0;
          right: 50%;
          width: 50%;
          z-index: 3;
          cursor: pointer;
      height: 100%;
      }
  
     #homepageRightNav {
          position: absolute;
          right: 0;
          left: 50%;
          width: 50%;
          z-index: 3;
          cursor: pointer;
      height: 100%;
     }
  
  .homepageTitle {
          cursor: default;
          width: 100%;
          margin: 0 auto;
          text-align: center;
      position: absolute;
      height: 100%;
      top: 100%;
       }
     .homepageNavLink{}
  
      #homepageLeftMessage {
      z-index: 100;
      height: 100px;
      width: 100px;
       }
  
       #homepageLeftMessage #subLogo {
      z-index: 100;
      }
  
      @media only screen and (max-width : 480px) {
       #homepageLeftImg {
      display:block;
       }
  
     #homepageRightImg {
      display:block;
      }
  }   
  </code></pre>