Bootstrap 3: panneaux d'Affichage à l'intérieur de leur puits sur navigateur redimensionner

Comment puis-je obtenir ces panneaux de rester à l'intérieur de leurs puits lorsque la fenêtre du navigateur est redimensionnée (en particulier à la largeur d'un appareil mobile)? Il serait probablement préférable de redimensionner le bien aussi. J'ai quelques questions qui se chevauchent.

Voici toute la largeur:

Voici mobile largeur (ish):

J'aimerais que Résumé dans le Volume & Frais, sur sa propre ligne, pas de chevauchement avec les autres puits.

Voici le code HTML:

<div class="container"> 
<div class="row clearfix" id="content-row">     
    <div class="col-md-12 column">
        <div class="well" id="volume-fees-well">
            <div class="row clearfix" id="volume-fees-row">                                                
                <div class="col-md-9 column" id="volume-fees-chart">
                    <div class="panel panel-primary" id="volume-fees-panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                Volume &amp; Fees
                            </h3>
                        </div>
                        <div class="panel-body">
                            <svg></svg>
                        </div>                      
                    </div>                                      
                </div>
                <div class="col-md-3 column">
                    <div class="panel panel-primary" id="volume-fees-summary-panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                Summary
                            </h3>
                        </div>
                        <div class="panel-body">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="well" id="vehicle-class-well">

Je suis en utilisant D3 pour les cartes, c'est ce que le svg est pour.

Je suis en utilisant le Bootswatch Yeti thème et le standard de Bootstrap.css. La seule CSS que j'ai remplacé à partir du Bootstrap.css est:

#content-row {
margin-top: 50px;
}

#volume-fees-row, #vehicle-class-row, #consignor-map-row, #buyer-map-row {
    height: 450px;
}

.panel {
    max-width: 100%;
}

.panel-body {
    height: 400px;
}

S'il vous plaît laissez-moi savoir si vous avez des questions!

OriginalL'auteur Will Weld | 2014-01-17