Media queries ne fonctionnent pas sur une plage déterminée...

Bonjour,

Je suis en train d'apprendre html/css. Pour ce faire, j'ai réalisé un petit site que je voulais rendre responsive.

J'ai utilisé bootstrap pour gérer l'ordre des colonnes et cela fonctionne, mais j'ai constaté que, en-dessous d'une résolution de 960px, l'ordre des colonnes n'était pas pris en compte, alors j'ai rajouté des media queries (à la fin de mon css). Cela m'a semblé fonctionner, mais j'ai toujours ce problème entre 995px et 667px j'ai essayé de rajouter ce morceau de code, en vain :

@media screen (max-width:995) and (min-width: 667)
{
.order-xs-3
	{
		order: 5 !important;
	}

	.order-xs-6
	{
		order:6 !important;
	}
}

Voici les morceaux de html qui sont concernés :

(J'ai bien mis le "viewport:)

			<meta name="viewport" content="width=device-width, initial-scale=1">
			

En fait, j'essaie de changer l'ordre des bloc lorsque la résolution diminue, le bloc aside, notamment. Voici les media queries associées :

/*mediaqueries*/
@media screen and (max-width: 960px)
{
	.largeur
	{
		width:100%;
	}

	.order-xs-3
	{
		order: 5;
	}

	.order-xs-6
	{
		order:6;
	}
}

/*fin mediaqueries*/

Et les morceaux de code html associés

<aside class="col-lg-3 col-md-12 col-xs-12 order-lg-0 order-xs-3">
	<aside class="col-lg-3 col-md-12 order-xs-6 align-self-end adresse"> 

Merci de votre aide !
Modifié par enkariss (08 Aug 2019 - 17:21)

Bonjour,

quelle version de bootstrap tu utilises ? Car sur la version 4 tu n'as pas de class ***-xs-***.