J'ai 3 div dans mon HTML. div1, div2, div3. Maintenant, dans la version mobile, je veux changer l'alignement de ces div. S'il vous plaît voir les images ci-dessous pour mieux comprendre.
html Remarque: j'utilise bootstrap 3 < / Strong> Comment faire cela? Quelqu'un de monde aide s'il vous plaît?
4 Réponses :
Essayez ceci:
@media only screen and (max-width: 400px) {
.row {
display: grid !important;
grid-template-columns: auto !important;
}
}
Voulez-vous dire grille ? Vous devriez éviter d'utiliser ! Important .
Oui je voulais dire grille
Utiliser col-sm-12 espérons que cela fonctionnera
Vous devez utiliser Grid: Colonne Commande
Selon le concept mobile-First, vous devez définir une vue par défaut pour mobile d'abord dans le bon ordre. P>
Attribuer P> COL-MD-PUSH-3 CODE> pour COL-MD-PULT-9 CODE> POUR Section 2 Strong> et définir sa largeur en utilisant Col-MD - Code> Classe. P>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>section 1</div>
</div>
<div class="col-xs-12 col-md-9 col-md-push-3">
<div>section 3</div>
</div>
<div class="col-xs-12 col-md-3 col-md-pull-9">
<div>section 2</div>
</div>
</div>
</div>
J'ai répondu quelque chose de similaire à cette question précédemment. La réorganisation du col-12 n'est pas possible avec Bootstrap-3 (Push / Pull). Vous pouvez utiliser la grille avec une requête multimédia pour le faire.
@media screen and (max-width: 992px) { //col-md breakpoint
.reordered {
display: grid;
}
.reordered.col-md-3 {
order: 2;
}
.reordered.col-md-9 {
order: 1;
}
}
duplicata de
https://stackoverflow.com/questions/55887520/how-to-change-d iv-align-in-mobile-v ersion / 55887568? Nore direct = 1 # Commentaire9843 4746_55887568