css - Overlapping columns after resizing in Bootstrap 3.0 -

css - Overlapping columns after resizing in Bootstrap 3.0 -

why in next bootstrap 3.0 sample right panel hides form when cut down width of 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%"> <a href="#">other ways buy</a><br/> </p> </div> </div> </div>

here live test of happens:

http://www.bootply.com/r4fsshi4af

to reproduce need cut down width of browser window.

thanks.

you mixing col-sm-9 col-md-3. utilize 1 size, illustration col-md-9 , col-md-3.

css twitter-bootstrap twitter-bootstrap-3