Bonjour à tous,

J'ai un formulaire qui sur les résolutions md et supérieurs (>=768) s'affiche en une seule ligne centrée.

<div class="col-md-10 col-md-offset-1">
[Label 1] [input 1] [Label 2] [Select 2] [Submit]
</div>

Avec naturellement des marges de même largeur.

Petite subtilité, mon "input 1" est flex et prend donc le maximum de la larger qui lui est attribué, mon formulaire est donc bien centré.

Maintenant si je réduis la taille d'affichage et que je passe en dessous de medium, j'aimerais faire ceci:

<div class="col-sm-10 col-md-offset-1">
[Label 1] [input 1]
</div>
<div class="col-md-10 col-md-offset-1">
[Label 2] [Select 2] [submit]
</div>

Mais cela implique que le html soit modifié en fonction de la largeur de l'affichage.

La méthode que j'envisage c'est de faire deux formulaires que j'affiche et que je cache alternativement en fonction de la résolution.

Malheureusement je ne sais pas si c'est une "bonne" façon de faire.

D'avance merci pour vos avis.

Je n'ai toujours pas eu confirmation alors je me permets de faire un petit up.

Si nous ne comprenez pas le problème n'hésitez pas à le préciser, je m'efforcerais d'être plus explicite.

Salut,

Bootstrap propose déjà des classes qui permettent d'afficher / masquer des éléments en fonction du support sur lequel on se trouve.

Mais l'idée n'est pas optimale ici : avoir du contenu en double, c'est pas trop recommandé.

Essaie plutôt de jouer sur les grilles justement :

<div class="col-md-6 col-sm-10 col-md-offset-1">
[Label 1] [input 1]
</div>
<div class="col-md-4 col-sm-10 col-md-offset-1">
[Label 2] [Select 2] [submit]
</div>

Merci rhooManu pour ton retour.

J'avais déjà essayé de jouer sur les grilles. Ca rend la chose un peu plus compliqué mais si tu dis que c'est plus propre, je vais suivre ton conseil.

Encore merci.