Responsive bootstrap form not becoming responsive

Responsive bootstrap form not becoming responsive

I am trying to build a form using bootstrap and need it to be responsive
too. That is it needs to go from 4 colmn layout to 3 to 1 colmn layout
deepending on width.
My code is located at jsFiddle http://jsfiddle.net/AzMz2/
You will notice that initially I have this as 4 columns. However, when I
resize, it doesn't become 3 column. I need this to become 3 column and
then as widths decreases to 2 and then to 1 column (aka responsiveness).
Also the columns need to align vertically and horizontally. That is also
not happening. What am I doing wrong? I can not seem to figure out. Thanks
in advance.
<form class="form-horizontal" name="submitDetails" acttion="#">
<fieldset>
<div class="control-group oneLine">
<label class="control-label" for="custom1">1. Did you telephone
us?</label>
<div class="controls">
<label class="radio span2" for="">
<input name="custom1" id="custom1" value="Yes" checked="checked"
type="radio">
Yes </label>
<label class="radio span2" for="">
<input name="custom1" id="custom1" value="No" type="radio">
No </label>
</div>
</div>
<div class="control-group oneLine">
<label class="control-label" for="custom2">2. How did you hear about
us?</label>
<div class="controls">
<div class="offset0">
<label class="radio inline span2" for="">
<input name="custom2" id="custom2" value="1" checked="checked"
type="radio">
Newspaper </label>
<label class="radio inline span2" for="">
<input name="custom2" id="custom2" value="2" type="radio">
Billboard </label>
<label class="radio inline span2" for="">
<input name="custom2" id="custom2" value="3" type="radio">
Yellow Pages </label>
<label class="radio inline " for="">
<input name="custom2" id="custom2" value="4" type="radio">
Radio </label>
</div>
<div class="offset0">
<label class="radio inline span2" for="">
<input name="custom2" id="custom2" value="5" type="radio">
Google / Internet </label>
<label class="radio inline span2" for="">
<input name="custom2" id="custom2" value="23" type="radio">
White Pages </label>
<label class="radio inline span2" for="">
<input name="custom2" id="custom2" value="7" type="radio">
Referral </label>
<label class="radio inline " for="">
<input name="custom2" id="custom2" value="8" type="radio">
Television </label>
</div>
<div class="offset0">
<label class="radio inline span2" for="">
<input name="custom2" id="custom2" value="9" type="radio">
Familiar with area </label>
<label class="radio inline span2" for="">
<input name="custom2" id="custom2" value="10" type="radio">
Magazine </label>
<label class="radio inline" for="">
<input name="custom2" id="custom2" value="21" type="radio">
Catalogue </label>
<label class="radio inline span2" for="">
<input name="custom2" id="custom2" value="25" type="radio">
Our website </label>
</div>
<div class="span2">
<label class="radio inline" for="">
<input name="custom2" id="custom2" value="24" type="radio">
1300 Number </label>
</div>
</div>
</div>
<br/>
<div align="right"><button>SUBMIT</button></div>
</fieldset>
</form>
<style type="text/css">
body {
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
max-width: 640px;
margin: 0 auto;
}
.oneLine .controls {
background-color: #d8d8d8;
margin:0px;
display:inline-block;
width:100%;
}
.control-group.oneLine > label {
float: none;
text-align: left;
width: 100%;
}
.error {
color: #ff0000;
}
.radio.inline{
margin-bottom:auto;
vertical-align: auto;
}
</style>