Maintaining divs side-by-side in responsive design

Question

As a beginner user of Bootstrap's grid system, I need to keep two divs side-by-side using a float:left regardless of device. This is so that a jQuery animation moves a parent div 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?

Disregard the blue box.

This is what I have so far:

<div class="container">
    <div class="col-xs-12 col-md-7 view">
        <div id="panelviewer">  
            <div class="row">
                <div class="col-xs-12 col-md-6 panel1">one</div>
                <div class="col-xs-12 col-md-6 panel2">two</div>
            </div>
        </div>
    </div>
</div>

Jsfiddle

Answer 1

There are other ways to keep the div s side by side and achieve what you need:

#panelviewer .row {white-space:nowrap;}
.panel1       {display:inline-block;float:none;background:#aaa;}
.panel2       {display:inline-block;float:none;background:#eee;}

Demo http://jsfiddle.net/7HcQ8/3/

Answer 2

No matter what unless you implicitly specify in a media query and your cells are too wide to fit in mobile it will force onto two lines. In this case when it hits the mobile breakpoint decrease the size of the content so it will fit. Place a unique class on those DIVs such as class="sizeSmaller" and this might help out:

   @media (max-width: 768px) {
    .sizeSmaller {
   height:50%;
    width:50%;
  }

}

Adjust the width of the media query to suit your neds.