changement de Bootstrap DIV commande en fonction de la taille de l'écran

Scénario: j'ai un éditeur de widget (pensez textarea) pour un restituable modèle, un panneau d'aperçu pour le modèle modifié, et une liste de messages d'erreur générés lors du rendu de l'aperçu. Mon but la mise en page est comme ceci:

small screen:            large screen:

+--------------+         +--------------+ +--------------+
|              |         |              | |              |
|    editor    |         |    editor    | |    preview   |
|              |         |              | |              |
+--------------+         +--------------+ +--------------+
|              |         +-------------------------------+
|    errors    |         |                               |
|              |         |            errors             |
+--------------+         |                               |
|              |         +-------------------------------+
|   preview    |         
|              |
+--------------+    

J'ai seulement besoin de ces deux mises en page (et non pas trois ou quatre), seuls les lg est assez grand pour avoir un sens pour l'éditeur et l'aperçu à côté de l'autre. Pour contrôler la taille, j'ai ajouté col-xs-12 à tous les trois DIVs et le col-lg-6 de l'éditeur et de l'aperçu (la liste d'erreurs devrait rester au 12 sur de grands écrans).

D'autres posts sur le sujet ont suggéré que la "plus petite" mise en page dicte l'ordre des DIVs dans le code HTML, donc, ce serait: l'éditeur, d'erreurs, de les prévisualiser. De plus, ils disent de changer l'ordre sur les grands écrans avec -pull - push - classes. J'ai essayé de faire cela en ajoutant des col-lg-pull-6 à l'aperçu et le col-lg-push-6 pour les erreurs. Comme je le comprends, push/pull de travail par rapport à la position actuelle de l'élément, de sorte que devrait avoir tiré de l'aperçu de l'arrière dans la première ligne, et a poussé les erreurs de la boîte dans la deuxième rangée.

Noter que je n'ai pas utilisé la "ligne" des classes que je ne comprends pas tout comment à les utiliser; le placement des éléments dans les lignes dépendent de la taille de l'écran, n'est pas fixée par le HTML (c'est le point de l'ensemble d'un réactif de mise en page, n'est-ce pas?)

D'autres postes ont également suggéré de rendre l'une des cases deux fois, d'en faire invisible en fonction de la taille de l'écran, mais il leur manque l'explication approfondie pourquoi c'est une bonne idée. C'est purement un problème de mise en page, et de nouveau le point de l'ensemble d'un réactif de mise en page est donc je n'ai pas à gâcher le code HTML de s'adapter à des tailles d'écran.

Je ne suis pas expert avec Bootstrap; donc je ne peux pas vous donner de Bootstrap solution, mais si vous utilisez le droit d'utiliser les CSS personnalisé que vous pouvez utiliser Flex Méthode et ses beaucoup plus facile d'obtenir une volonté de mise en page. La principale caractéristique de Flex est, à tout moment, vous pouvez modifier l'ordre d'affichage des divs.
Sauf si vous utilisez Flexbox, il n'y a pas de CSS solution. La poussée, la traction, et les décalages qui viennent avec Bootstrap travail horizontalement en fonction de positionnement relatif plus ou moins à gauche ou à droite. Vous pouvez dupliquer et ajouter avec jQuery ou utiliser côté serveur pour servir des différents html pour toucher des appareils qui répondent à vos exigences de largeur ou vous pouvez masquer et afficher avec le réactif utilitaires
Responsive design est de présenter, de ne pas s'adapter, le html comme il est, mais ajusté via css pour accueillir le port de la vue. Conception adaptative, en utilisant les outils côté serveur, peuvent servir des différents html basé sur l'appareil. Sans Flex, vous pouvez utiliser les css pour masquer et afficher et/ou jQuery pour le clone et l'ajouter. Si vous connaissez la largeur et la hauteur de l'éditeur et de l'aperçu, vous pouvez utiliser le positionnement absolu pour la faire ressembler il est en-dessous et à l'utilisation remplissage en bas sur le conteneur pour le garder ouvert. Vous pouvez utiliser jQuery pour écrire la hauteur et le positionnement de la charge et la redimensionner. caniuse.com/#search=flex
pouvez-vous veuillez reproduire le problème dans un violon pour nous aider à comprendre la structure?
êtes-vous d'accord avec jquery solution? il semble qu'il n'y est pas de css solution.

OriginalL'auteur Martin Geisse | 2014-08-16