Hallo liebe CSS-Profis! 
Ich bin neu hier und kenne mich mit Webdesign leider zu wenig aus, um bestimmte Zusammenhangslogiken von CSS und HTML zu verstehen.
Ich möchte erreichen, dass auf meiner Webseite entweder das eine oder das andere Bild angezeigt wird, je nach dem, ob die Seite auf einem kleineren oder größeren Gerät aufgerufen wird (Smartphone oder PC).
Hier ein einfaches Beispielscript, dass von der Logik her so natürlich nicht funktioniert:
<html>
<head>
<style type="text/css">
@media only screen and (min-device-width: 1025px) {
.Service1 {
}
}
@media only screen and (max-device-width: 1024px) {
.Service2 {
}
}
</style>
</head>
<body>
<div class="Service1">
<img id="Service" src="bild1.jpg"/>
</div>
<div class="Service2">
<img id="Service" src="bild2.jpg"/>
</div>
</body>
</html>
Meine eigene Logik wäre, dass bei Geräten mit über 1024 Pixeln das DIV mit der class "Service1" aufgerufen wird und im anderen Fall das DIV mit der class "Service2". Aber das geht nicht, weil die beiden DIVs durch ihre class nicht "entweder oder" erscheinen, sondern gleichzeitig. Ich könnte in CSS also nur eine Entweder-oder-Class definieren, die das Aussehen eines DIVs steuert, aber nicht, dass innerhalb des DIVs entweder das eine oder das andere Bild erscheint. Und ich kann ja auch nicht das Bild in die class reinsetzen und im Body-Bereich nur noch ein DIV aufrufen. Zumindest möchte ich das nicht, weil ich im Body-Bereich auf meiner Webseite eine Tabelle habe, in deren Zellen die Bilder platziert werden sollen.
Ich möchte übrigens kein Javascript verwenden und will, dass es auf allen Browsern funktioniert, also auch Firefox und Internet Explorer.
Wie mache ich das also?
Vielen Dank im Voraus
