Im trying to reorder divs when in the mobile version of my site, is it possible to do it with media queries?

Question

Im trying to reorder divs when in the mobile version of my site, is it possible to do it with media queries? Here is the layout in desktop view, red being what would be images. And when i rescale, the content stacks together to place two of the same boxes together, like so;
Is it possible to apply a rule so when scaled the boxes reorder to show red, black, red, black, red, black?

Answer 1

<div class="productcontainer3">
<div class="product3"></div>
</div>
<div class="productcontainer4">
<div class="product4"><h6>Manta Soledo</h6><p1>In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant. </p1></div>
</div>
<div class="productcontainer1">
<div class="product1"><h6>Manta Soledo</h6><p1> In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant.</p1> </div>
</div>
<div class="productcontainer2">
<div class="product2"></div>
</div>
<div class="productcontainer5">
<div class="product5"></div>
</div>
<div class="productcontainer6">
<div class="product6"><h6>Manta Soledo</h6><p1>In here will be the Manta blurb! Not too much technical info, save that for product page. Make it sleek and elegant. </p1></div>
.productcontainer1 {
  float: left;
  clear: both;
  max-width: 604px;
  width: 49%;
  margin-right: 1%;
  margin-bottom: 4%;
  margin-top: 1%;
@media all and (max-width: 600px) {
.productcontainer1 {
  width: 100%;
.productcontainer2 {
  float: left;
  max-width: 604px;
  width: 49%;
  margin-bottom: 4%;
  margin-top: 1%;
@media all and (max-width: 600px) {
.productcontainer2 {
  width: 100%;
.productcontainer3 {
  float: left;
  clear: both;
  max-width: 604px;
  width: 49%;
  margin-right: 1%;
  margin-bottom: 4%;
@media all and (max-width: 600px) {
.productcontainer3 {
  width: 100%;
.productcontainer4 {
  float: left;
  max-width: 604px;
  width: 49%;
  margin-bottom: 4%;
@media all and (max-width: 600px) {
.productcontainer4 {
  width: 100%;
.productcontainer5 {
  float: left;
  clear: both;
  max-width: 604px;
  width: 49%;
  margin-right: 1%;
@media all and (max-width: 600px) {
.productcontainer5 {
  width: 100%;
.productcontainer6 {
  float: left;
  max-width: 604px;
  width: 49%;
@media all and (max-width: 600px) {
.productcontainer6 {
  width: 100%;
.product1 {
  Width: 100%;
  padding-bottom: 50%;
  float: left;
  background-position: center;
    background-size: cover;
    background-repeat: none;
.product2:hover {
  background-image:url(../Graphics/iMod-rollover.jpg);
.product2 {
  Width: 100%;
  background-image:url(../Graphics/iModindex.jpg);
  padding-bottom: 50%;
  float: left;
  background-position: center;
    background-size: cover;
    background-repeat: none;
  -webkit-transition: background-image .8s ease-in-out;
  -moz-transition: background-image .8s ease-in-out;
  -ms-transition: background-image .8s ease-in-out;
  -o-transition: background-image .8s ease-in-out;
  transition: background-image .8s ease-in-out;
.product3 {
  Width: 100%;
  padding-bottom: 50%;
  float: left;
  background-position: center;
    background-size: cover;
    background-repeat: none;
  background-image:url(../Graphics/Ilanoindex.jpg);
  -webkit-transition: background-image .8s ease-in-out;
  -moz-transition: background-image .8s ease-in-out;
  -ms-transition: background-image .8s ease-in-out;
  -o-transition: background-image .8s ease-in-out;
  transition: background-image .8s ease-in-out;
.product4 {
  Width: 100%;
  padding-bottom: 50%;
  float: left;
  background-position: center;
    background-size: cover;
    background-repeat: none;
.product3:hover {
  background-image:url(../Graphics/Ilano-rollover.jpg);
.product5 {
  Width: 100%;
  background-image:url(../Graphics/Soledoindex.jpg);
  padding-bottom: 50%;
  float: left;
  background-position: center;
    background-size: cover;
    background-repeat: none;
  -webkit-transition: background-image .8s ease-in-out;
  -moz-transition: background-image .8s ease-in-out;
  -ms-transition: background-image .8s ease-in-out;
  -o-transition: background-image .8s ease-in-out;
  transition: background-image .8s ease-in-out;
.product5:hover {
  background-image: url(../Graphics/Soledorollover.jpg);
.product6 {
  Width: 100%;
  padding-bottom: 50%;
  float: left;
  background-position: center;
    background-size: cover;
    background-repeat: none;