Responsive 6

Selon la résolution de votre écran, vous verrez soit le premier cadre en rouge (300px à 900px); soit le second en jaune (1000px à 1100px); soit le troisième en vert fluo (1110px à 1400px);
...
<div id="art">
<div id="mont">
<p id="a1" class="resp">&nbsp;</p>
<p id="a2" class="resp">&nbsp;</p>
<p id="a3" class="resp">&nbsp;</p>
</div>
</div>

<style type="text/css"><!--
#mont{float:left; width:20%; height:auto; background:url('https://ekladata.com/AHhv6xStUIreQonx5ATb-mDlvh0/00018.jpg '); border:3px double grey;}
.resp{border:3px double grey; margin:30px; width:50%; height:auto; box-shadow:3px 3px 6px black;}
#comm{float:left; margin:0 0 0 40px; width:60%; height:auto; padding:10px;background:url('https://ekladata.com/_MnFZ-Gzlevc1PIta7kt4j5PEoY/00044.jpg'); border:3px double brown;}
@media (min-device-width: 300px) and (max-device-width: 900px){#a1 {background-color:red;}}

@media (min-device-width: 1000px) and (max-device-width: 1100px){#a2 {background-color:yellow;}}

@media (min-device-width: 1110px) and (max-device-width: 1400px){#a3 {background-color:lime;}}
--></style>