title: Change column order using media query
body: <p>What I'm trying to do is to put the right column next to the left column using media query (right now it is next to the center column). The right column should also have left margin 10px (as the screen size shrinks) as it is in the example.
  I add position: absolute; right: 8px; to .right but it doesnt work the way I need.
  Thank You.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      border-radius: 4px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
  }
  #header {
      height: 52px;
      width: calc(100% - 16px);
      background-color: #B2D490;
      z-index: 1;
      position: fixed;
      top: 10px;
  }
  h1 {
      color: #FFFFFF;
      padding-left: 25px;
      margin: 0;
      display: inline;
      font-size: 27px;
      line-height: 50px;
  }
  h2, h3, h4, h5, h6 {
      padding-left: 10px;
      margin: 10px 0 10px 0px;
      color: #00457D;
  }
  .left {
      width: 300px;
      background-color: #C7E6FF;
      float: left;
      margin-top: 64px;
      margin-right: calc(50% - 450px);
  }
  .middle {
      width: 300px;
      background-color: #DEF0FF;
      margin-top: 64px;
      float: left;
  }
  .right {
      width: 300px;
      background-color: #C7E6FF;
      float: right;
      margin-top: 64px;
  }
  #footer {
      height: 35px;
      width: 100%;
      background-color: #57C449;
      clear: both;
      position: relative;
      margin-top: 10px;
  }
  p {
      color: #00579E;
  }
  #footer p {
      color: #FFFFFF;
      text-align: center;
      margin: auto;
      line-height: 35px;
  }
  span {
      color: #D4EBFF;
  }
  
  @media screen and (max-width: 980px) {
    body {
        width: 95%;
    }
     .left {
        width: 60%;
        margin-right: 0;
     }
     .middle {
        width: 60%;
        margin-top: 10px;
       clear: both;
     }
     .right {
        width: calc(40% - 10px);
        margin-top: 10px;
  
    
        
     }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link type="text/css" rel="stylesheet" href="stylesheet.css"/&gt;
    &lt;title&gt;My Resume&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;div id="header"&gt;
       &lt;h1&gt;My &lt;span&gt;Resume&lt;/span&gt;&lt;/h1&gt;
   &lt;/div&gt;
   &lt;div class="left"&gt;
       &lt;h2&gt;Left Column&lt;/h2&gt;
           &lt;ul&gt;
               &lt;p&gt;Some Text&lt;/p&gt;
               &lt;p&gt;Some Text&lt;/p&gt;
           &lt;/ul&gt;
   &lt;/div&gt;
    &lt;div class="middle"&gt;
       &lt;h2&gt;Сenter Column&lt;/h2&gt;
           &lt;ul&gt;
                  &lt;li&gt;&lt;p&gt;Some Text&lt;/p&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;p&gt;Some Text&lt;/p&gt;&lt;/li&gt;
          &lt;/ul&gt;
   &lt;/div&gt;
   &lt;div class="right"&gt;
       &lt;h4&gt;Right Column&lt;/h4&gt;
           &lt;ul&gt;
               &lt;p&gt;Some Text&lt;/p&gt;
               &lt;p&gt;Some Text&lt;/p&gt;
          &lt;/ul&gt;
   &lt;/div&gt;
   &lt;div style="clear:both; border:none; border-radius: none;"&gt;&lt;/div&gt;
   &lt;div id="footer"&gt;
       &lt;p&gt;© 2015 Me - the Programmer&lt;/p&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>