Fieldsets Using Bootstrap Grids - html

Question

I have the following markup using bootstrap grids:
<form id="store-form" class="user-form">
<div class="row">
<div class="col-sm-6">
<fieldset id="store-form-store-fields">
<label>Store Nickname</label>
<input id="store-nickname-field" type="text" name="nickname" required class="form-control">
</fieldset>
</div>
<fieldset id="store-form-location-fields">
<div class="col-sm-6">
<label>Store Address</label>
<input id="store-street-field" type="text" name="street" required class="form-control">
</div>
<div class="col-sm-6">
<label>City</label>
<input id="store-city-field" type="text" name="city" required class="form-control">
</div>
<div class="col-sm-3">
<label>State</label>
<select id="store-state-field" name="state_id" required class="form-control">
<option>- Select a State -</option>
<option value="MA">Massachusetts</option>
<option value="CA">California</option>
</select>
</div>
<div class="col-sm-3">
<label>Zip Code</label>
<input id="store-zipcode-field" type="text" name="zipcode" required class="form-control">
</div>
</fieldset>
</div>
<div class="submit-wrapper">
<button id="store-form-submit" type="submit" class="btn btn-primary submit-button">Save</button>
</div>
</form>
As you can see, I'm trying to use fieldsets to group the fields into two groups. I need to do this so that I can create Backbone.js view for each group of fields separately. Obviously this breaks the grid, since I have an immediate child of .row that isn't a column div.
Is there any way at all to make fieldsets work with a form that is layed out using Bootstrap grids?
Edit for clarification: My goal is for the layout to behave the same as if the fieldsets were removed from the example.

Answer 1

What about wrapping the second <fieldset> in a div.col-md-6 and putting all the contents of the second <fieldset> in div.row? That way you are not skipping the css column definition. Let me know if that helps.
UPDATE:
I modified the code to use responsive resets and col-md-pull/col-sm-pull. Seems to remain responsive. This may be closest solution possible as you would not be able to properly close the col definition <div> within that fieldset to get proper clearing.
http://jsfiddle.net/s9baun7c/4/
<form id="store-form" class="user-form">
<div class="row">
<div class="col-sm-6">
<fieldset id="store-form-store-fields">
<label>Store Nickname</label>
<input id="store-nickname-field" type="text" name="nickname" required class="form-control" />
</fieldset>
</div>
<fieldset id="store-form-location-fields">
<div class="col-sm-12">
<label>Store Address</label>
<input id="store-street-field" type="text" name="street" required class="form-control" />
</div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-sm-block"></div>
<div class="row">
<div class="col-md-12">
<div class="col-sm-12 col-sm-pull-12 col-sm-pull-12">
<label>City</label>
<input id="store-city-field" type="text" name="city" required class="form-control" />
</div>
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-sm-pull-12 col-sm-pull-12">
<label>State</label>
<select id="store-state-field" name="state_id" required class="form-control">
<option>- Select a State -</option>
<option value="MA">Massachusetts</option>
<option value="CA">California</option>
</select>
</div>
<div class="col-sm-6 col-sm-pull-12 col-sm-pull-12">
<label>Zip Code</label>
<input id="store-zipcode-field" type="text" name="zipcode" required class="form-control" />
</div>
</div>
</div>
</fieldset>
</div>
<br>
<div class="submit-wrapper">
<button id="store-form-submit" type="submit" class="btn btn-primary submit-button">Save</button>
</div>
</form>