Stai cercando come mostrare 2 immagini differenti in base al device? E stai
cercando di fare questo usando Bootstrap? Se si io avevo la stessa necessità
perché sui cellulari avevo la necessità di mostrare una foto più alta che
larga, mentre sui desktop il contrario
Secondo i programmatori noi grafici dovremmo fare impaginazioni responsive e
quindi scegliere immagini che vadano bene per i vari Device e magari mettere
del testo che si adatta ad esso. Quello che non sanno i programmatori è che
per un grafico è più facile e veloce fare 2 immagini con impaginazioni
differenti.
Per vedere al meglio questo esempio ti consiglio di navigare questa pagina
con un monitor e non con un cellulare. Ti consiglio infine di cliccare su
ispeziona codice del tuo browser, meglio se con Chrome e cliccare sulle
prime icone della finestra di ispezione per passare dalla visualizzazione
Mobile a quella Desktop, perché questo è il modo migliore per vedere come
cambiando la larghezza del “device” e del “browser” cambierà anche
l’immagine proposta. Quindi ho creato una immagine 1200×1200 per i cellulari
che si riadatterà responsive sotto i 980px e una immagine 1200×680 che si
adatterà responsive sopra i 980px
Attento alla sintassi del CSS perché come puoi vedere
<style>
@media all and (max-width: 980px) {.nocell {display:none;}}
@media all and (min-width: 980px) {.nodesktop {display:none;}}
</style>
gli stili sono racchiusi dentro due parentesi graffe { }
Per approfondimenti consiglio la lettura di questo articolo:
https://nicholasmarmonti.com/tutorial/media-queries-css/