Table groupée bootstrap

Salut,

Je cherche à créer une interface type tableau de bord.
Sut un écran de PC, j'aimerais avoir 4 colonnes mais, lorsqu'on réduit la largeur, j'aimerais que les 4 colonnes de chaque ligne s'empilent (pour une meilleure visibilité sur mobile).
Je suis parti sur un projet .net Core mvc de base, j'ai donc la version de bootstrap déjà intégrée.

Vue écran :
GRP1
+------------++------------++------------++------------+
GRP2
+------------++------------++------------++------------+
+------------++------------++------------++------------+
+------------++------------++------------++------------+
GRP3
+------------++------------++------------++------------+
+------------++------------++------------++------------+

Vue mobile
GRP1
+------------+
+------------+
+------------+
+------------+

GRP2
+------------+
+------------+
+------------+
+------------+

+------------+
+------------+
+------------+
+------------+

+------------+
+------------+
+------------+
+------------+

GRP3
+------------+
+------------+
+------------+
+------------+

+------------+
+------------+
+------------+
+------------+

J'ai utilisé
row
col-md-3 col-xs-1

Le souci c'est que je n'ai pas le comportement attendu.

Pourriez-vous m'aider ?

Merci

Hello,
Il faut voir col-md-3 comme 3/12 de la ligne au format "md". Pour col-xs-1, cela veut donc dire 1/12 au format "xs".

Aussi, il faut savoir que Bootstrap est un framwork mobile first. Une fois que tu sais ça, cela veut dire que si tu définis plusieurs class comme exemple :

<div class="col-md-1 col-xs-6 col-lg-3"></div>

Peu importe l'ordre, si ton affichage le permet col-xs-6 sera appliqué, puis surclassé par col-md-1, et surclassé ensuite par col-lg-3.

Dernière chose, quand si tu ne définis pas de class "col-xs-..." ce sera le display de l'élément qui sera prit en compte. => Si un <div>, c'est un élément block qui prend 100% de la largeur par défaut donc ajouter une class col-xs-12 serait inutile