Change column order using media query

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.

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;

  
      
   }
}

<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Resume</title>
	</head>
	<body>
	<div id="header">
	    <h1>My <span>Resume</span></h1>
	</div>
	<div class="left">
	    <h2>Left Column</h2>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	        </ul>
	</div>
		<div class="middle">
	    <h2>Сenter Column</h2>
	        <ul>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
        </ul>
	</div>
	<div class="right">
	    <h4>Right Column</h4>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	       </ul>
	</div>
	<div style="clear:both; border:none; border-radius: none;"></div>
	<div id="footer">
	    <p>© 2015 Me - the Programmer</p>
	</div>

Solution

You can achieve this by making a few changes to your CSS and HTML:

Move the .middle div after the .right div in HTML
Change margin-top: 10px; to margin-top: 64px; on .right in the media query

This works because .middle is set to float: left; which will push it to the left of its container until it hits another floated element (in this case .left). .right is set to float: right; which will push it to the right of its container.

How floats are positioned

As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.

float (https://developer.mozilla.org/en-US/docs/Web/CSS/float)

When the media query is in effect .middle is set to clear: both;, as it is after both .left and .right in HTML it will be placed on a new line clearing both floated elements.

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: 64px;
  }
}

<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  <title>My Resume</title>
</head>

<body>
  <div id="header">
    <h1>My <span>Resume</span></h1>
  </div>
  <div class="left">
    <h2>Left Column</h2>
    <ul>
      <p>Some Text</p>
      <p>Some Text</p>
    </ul>
  </div>
  <div class="right">
    <h4>Right Column</h4>
    <ul>
      <p>Some Text</p>
      <p>Some Text</p>
    </ul>
  </div>
  <div class="middle">
    <h2>Сenter Column</h2>
    <ul>
      <li>
        <p>Some Text</p>
      </li>
      <li>
        <p>Some Text</p>
      </li>
    </ul>
  </div>
  <div style="clear:both; border:none; border-radius: none;"></div>
  <div id="footer">
    <p>© 2015 Me - the Programmer</p>
  </div>