Look, you can do this using a Zurb Foundation feature, in this case Interchange , as Zurb is all modular, you can just download it.

To download it, just go to the following link and leave selected only the Interchange

To configure it is very simple:

HTML

<div data-interchange="[URL Tela Pequena, (small)], [URL Tela Media, (medium)], [URL Tela Grande, (large)]">
</div>

JavaScript

$(document).foundation();

A small functional example using Blobs:

//inicio da criação dinamica dos links externos
var blobs = {};
blobs.telaPequena = new Blob(["<p>Tela Pequena</p>"], { type: "text/html" });
blobs.telaMedia = new Blob(["<p>Tela Media</p>"], { type: "text/html" });
blobs.telaGrande = new Blob(["<p>Tela Grande</p>"], { type: "text/html" });

var urls = {};
urls.telaPequena = URL.createObjectURL(blobs.telaPequena);
urls.telaMedia = URL.createObjectURL(blobs.telaMedia);
urls.telaGrande = URL.createObjectURL(blobs.telaGrande);   

var container = document.getElementById("container");
container.dataset.interchange = "" + 
    "[" + urls.telaPequena + ", (small)], " + 
    "[" + urls.telaMedia + ", (medium)], " + 
    "[" + urls.telaGrande + ", (large)]";
//termino da criação dinamica dos links externos

$(function () {
    $(document).foundation();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.js"></script>
<div id="container">
</div>

Feel free to resize the page and see the content change.

TIP

$(document).foundation('interchange', {
  named_queries : {
    my_custom_query : 'only screen and (max-width: 200px)'
  }
});

Sorry for my ignorance, but the answers are still unclear ...

My page (with the DIVs in question) looks like this:

=================================

I have a CSS with the following format:

/ * -------------------------------------------- *  * Toolbar-web  * / @media only screen and (min-width: 480px) {     .toolbar-web {       margin-top: 10px;       margin-bottom: 15px;       border-bottom: 1px solid #cccccc;       border-top: 1px solid #cccccc;       background: # f4f4f4;       padding: 5px 10px 0px 10px;     }     .toolbar-web: after {       content: '';       display: table;       clear: both;     }

.pager-no-toolbarweb {
  margin-bottom: 10px;
}

.pager-no-toolbarweb ~ .pager-no-toolbarweb {
  margin-top: 10px;
}

.toolbar-web,
.pagerweb {
  font-family: "Open Sans", "Helvetica Neue", Verdana, Arial, Raleway, sans-serif;
  color: #636363;
  line-height: 30px;
  font-size: 12px;
}

.toolbar-web label,
.pager-no-toolbarweb label {
  font-weight: normal;
  text-transform: uppercase;
}

}

/ * -------------------------------------------- *  * Toolbar-wap  * /  @media only screen and (max-width: 479px) {     .toolbar-wap {       margin-top: 10px;       margin-bottom: 15px;       border-bottom: 1px solid #cccccc;       border-top: 1px solid #cccccc;       background: # f4f4f4;       padding: 5px 10px 0px 10px;     }     .toolbar-wap: after {       content: '';       display: table;       clear: both;     }

.pager-no-toolbarwap {
  margin-bottom: 10px;
}

.pager-no-toolbarwap ~ .pager-no-toolbarwap {
  margin-top: 10px;
}

.toolbar-wap,
.pagerwap {
  font-family: "Open Sans", "Helvetica Neue", Verdana, Arial, Raleway, sans-serif;
  color: #636363;
  line-height: 30px;
  font-size: 12px;
}

.toolbar-wap label,
.pager-no-toolbarwap label {
  font-weight: normal;
  text-transform: uppercase;
}

}

=================================

How to Hide Class DIVs: "toolbar-wap" and "toolbar-web"