Overlapping columns after resizing in Bootstrap 3.0 - css

Question

Why in the following Bootstrap 3.0 sample the right panel hides completely the form when I reduce the width of the browser?
<div class="row">
<div class="col-sm-9">
<h2>Product selection</h2>
<p>Some text</p>
<hr />
<form action="/Store" class="form-horizontal" id="productForm" method="post" role="form">
<div class="form-group">
<label class="col-md-2 control-label" for="Quantity">Quantity</label>
<div class="col-md-10">
<input class="form-control" id="quantity" name="quantity" onchange="this.form.submit();" type="text" value="1" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input name="nextButton" type="submit" class="btn btn-default" value="Next" />
</div>
</div>
</form>
</div>
<div class="col-md-3" style="margin-top: 20px">
<div class="panel panel-default">
<div class="panel-heading">Your Options</div>
<div class="panel-body">
<p style="line-height: 200%">
Other ways to buy<br/>
</p>
</div>
</div>
</div>
Here is a live test of what happens:
http://www.bootply.com/R4FsSHI4af
To reproduce it you need simply to reduce the width of the browser window.
Thanks.

Answer 1

You are mixing col-sm-9 with col-md-3. Just use one size, for example col-md-9 and col-md-3.

Answer 2

Use this structure instead :
<div class="row">
<div class="col-md-9">
<!-- Content -->
</div>
<div class="col-md-3">
<!-- Panel -->
</div>
</div>
As you're mixing col-sm-9 and col-md-3, you've got :
a 12-12 pattern on small devices
a 9-12 pattern on medium devices : overlap
a 9-3 pattern on large and extra large devices