Le responsive consiste à adapter le contenu à différent écrans. En déplaçant les blocs la lisibilité reste claire.
Pour cela il faut déjà insérer une balise dans le head du html:
<meta name= »viewport » content= »width=device-width, initial-scale=1.0, maximum-scale=3.0″>
Puis indiquer à partir de quelle taille d’écrans nous voulons ces modifications.
pour le premier exemple le code reste celui de base.
pour la deuxième il faut insérer:
@media screen and (min-width:769px){
insérer les changement.
}
Et la troisième:
@media screen and ( min-width:992px){
insérer les changement.
}
Voir le code plus bas.