Q:

Responsive Div Table Struggle Multiple Rows

I'm looking for a solution to my responsive table struggles.
I have a table with rows of different column lengths within a content wrapper of 960px.
However the cols of two and three don't fit the same width when they're 50% or 49% and 33% of 33.3% respectively.
I've trawled through google's suggestion guides but nothing I've seen thus far offers up what I'm looking for.
Is it possible to make a truly responsive div table with different col lengths in the rows?
Demo code
<div class="masterTable">
        <div class="row" style="width: 100%;">

            <div class="col3" style="width: 33%">
                <asp:TextBox ID="TB1" runat="server"></asp:TextBox>
            </div>
            <div class="col3" style="width: 33%">
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </div>
            <div class="col3" style="width: 33%">
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            </div>
        </div>
        <div class="row" style="width: 100%;">

            <div class="col2" style="width: 50%">
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            </div>
            <div class="col2" style="width: 50%">
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            </div>
        </div>
    </div>
</div>

A:

I would like to refer to Bootstrap.
It's a framework used by many developers in order to gain beautifull responsive designs.
Intro to there Gridsystem ( see tab Css on the bootstrap website ):
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Take a look at this, it will you save a lot of time.
Edit:
I have created a jsfiddle with a short example: http://jsfiddle.net/VDesign/38n0b3v4/
Code:
<div class="masterTable">
        <div class="row">

            <div class="col-sm-4">
                <input id="text1" class="form-control" />
            </div>
            <div class="col-sm-4">
                <input id="text2" class="form-control" />
            </div>
            <div class="col-sm-4">
                <input id="text3" class="form-control" />
            </div>
        </div>
        <div class="row">

            <div class="col-sm-6">
                <input id="text4" class="form-control" />
            </div>
            <div class="col-sm-6">
                <input id="text5" class="form-control" />
            </div>
        </div>
    </div>
</div>

