Bootstrap - Modifier les lignes et les colonnes afin

En utilisant Bootstrap est-il possible d'avoir ces deux configurations différentes en fonction de la fenêtre d'affichage? J'ai été à la recherche à ce sujet et je suis conscient des concepts pousser, tirer et sensible utilitaires mais les exemples que j'ai trouvé a des structures plus simples.

Sur ce cas, je préfère ne pas utiliser les réactifs utilitaires (car il y aurait beaucoup de traitement répété) et/ou JavaScript, HTML et CSS de la manipulation.

Voici un violon avec la mauvaise mise en page sur les smartphones...

<div class="row">
  <div class="col-sm-4 elA">Title A</div>
  <div class="col-sm-4 elB">Title B</div>
  <div class="col-sm-4 elC">Title C</div>

  <div class="col-sm-4 elA">Graph A</div>
  <div class="col-sm-4 elB">Graph B</div>
  <div class="col-sm-4 elC">Graph C</div>

  <div class="col-sm-12 elA">List A</div>
  <div class="col-sm-12 elB">List B</div>
  <div class="col-sm-12 elC">List C</div>
</div>

Les tablettes et les ordinateurs de bureau de mise en page

Bootstrap - Modifier les lignes et les colonnes afin

Smartphones disposition

Bootstrap - Modifier les lignes et les colonnes afin

  • Si cela est encore possible, il est nouvelles pour moi.
  • Eu un problème similaire. Ce que j'ai fait était chargement de la section deux fois et de cacher celle que je n'ai pas besoin. Cependant, dans mon cas, la section a été très court et ne contenait que du texte. Donc je ne sais pas, si c'est quelque chose que vous aimeriez faire.
  • Sur mon cas, je préfère ne pas utiliser cette approche car sur le meilleur scénario, je dois rendre des six grandes listes au lieu de trois.
  • Je pense que l'approche que je voudrais utiliser est de vérifier l'agent de l'utilisateur sur le serveur, et d'appliquer une feuille de style supplémentaire pour les navigateurs mobiles.
  • j'ai une solution, mais seulement si la liste que la même disposition que l'autre élément (trois dans une rangée) jsfiddle.net/mehfb6p0/1
  • avec un peu d'astuce, on peut faire ce que vous voulez mais je ne suis pas sur qu'il fonctionnera pour 6 élément : jsfiddle.net/mehfb6p0/3
  • ekans qui est une bonne solution! Il fonctionne très bien, mais je vais faire des tests un peu plus. Merci! J'aimerais voir plus de solutions pour cela 🙂
  • De vérifier ma solution je pari est mieux que @ekans

InformationsquelleAutor Sérgio | 2014-11-05