title: Maintaining divs side-by-side in responsive design
body: <p>As a beginner user of Bootstrap's grid system, I need to keep two divs side-by-side using a <code>float:left</code> regardless of device. This is so that a jQuery animation moves a parent <code>div</code> right and left to bring either div into view. How to structure the HTML of the green boxes to achieve this effect? Or it purely a css media query matter?</p>
  
  <p><img src="https://i.stack.imgur.com/A2d7K.png" alt="enter image description here"></p>
  
  <p>Disregard the blue box.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="col-xs-12 col-md-7 view"&gt;
          &lt;div id="panelviewer"&gt;  
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12 col-md-6 panel1"&gt;one&lt;/div&gt;
                  &lt;div class="col-xs-12 col-md-6 panel2"&gt;two&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/7HcQ8/" rel="nofollow noreferrer">Jsfiddle</a></p>