Responsive Div Width - css

Question

I `want to make several 'blocks' of text go from this:
|1| |2| |3| |4| |5| |6|
When viewed on a screen wider than a tablet, to be responsive according to the smaller screen size, like this:
On tablet:
| 1 | | 2 | | 3 |
| 4 | | 5 | | 6 |
On mobile:
|1|
|2|
|3|
|4|
|5|
|6|
Here is the weblink to the page:
create.qublu.com/rates
The full width of the page is 980px. What I need is for each div to have a responsive width according to the screen size viewed and to be centered on the screen.
As you will see on the page, there are four toggle buttons. Level 1, Level 2, Level 3 and Level 4. Level 2 works absolutely fine and perfect. But all the blocks on Level 1 just aren't lining up when viewed on large screens. Instead, the blocks are displaying 3 blocks x 2 rows. Very frustrating!
This is the CSS code I am using:
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-1 {
width: 8.33%;
float: left;
}
#media (min-width: 321px) {
.col-sm-1 {
width: 8.33%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-1 {
width: 8.33%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-1 {
width: 8.33%;
float: left;
}
}
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-2 {
width: 16.66%;
float: left;
}
#media (min-width: 321px) {
.col-sm-2 {
width: 16.66%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-2 {
width: 16.66%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-2 {
width: 16.66%;
float: left;
}
}
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-3 {
width: 25%;
float: left;
}
#media (min-width: 321px) {
.col-sm-3 {
width: 25%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-3 {
width: 25%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-3 {
width: 25%;
float: left;
}
}
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-4 {
width: 33.33%;
float: left;
}
#media (min-width: 321px) {
.col-sm-4 {
width: 33.33%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-4 {
width: 33.33%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-4 {
width: 33.33%;
float: left;
}
}
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-5 {
width: 41.66%;
float: left;
}
#media (min-width: 321px) {
.col-sm-5 {
width: 41.66%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-5 {
width: 41.66%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-5 {
width: 41.66%;
float: left;
}
}
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-6 {
width: 50%;
float: left;
}
#media (min-width: 321px) {
.col-sm-6 {
width: 50%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-6 {
width: 50%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-6 {
width: 50%;
float: left;
}
}
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-7 {
width: 58.47%;
float: left;
}
#media (min-width: 321px) {
.col-sm-7 {
width: 58.47%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-7 {
width: 58.47%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-7 {
width: 58.47%;
float: left;
}
}
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-8 {
width: 66.66%;
float: left;
}
#media (min-width: 321px) {
.col-sm-8 {
width: 66.66%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-8 {
width: 66.66%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-8 {
width: 66.66%;
float: left;
}
}
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-9 {
width: 75%;
float: left;
}
#media (min-width: 321px) {
.col-sm-9 {
width: 75%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-9 {
width: 75%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-9 {
width: 75%;
float: left;
}
}
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-10 {
width: 83.33%;
float: left;
}
#media (min-width: 321px) {
.col-sm-10 {
width: 83.33%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-10 {
width: 83.33%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-10 {
width: 83.33%;
float: left;
}
}
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-11 {
width: 91.74%;
float: left;
}
#media (min-width: 321px) {
.col-sm-11 {
width: 91.74%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-11 {
width: 91.74%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-11 {
width: 91.74%;
float: left;
}
}
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-12 {
width: 99%;
float: left;
}
#media (min-width: 321px) {
.col-sm-12 {
width: 99%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-12 {
width: 99%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-12 {
width: 99%;
float: left;
}
}
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-15 {
width: 20%;
float: left;
}
#media (min-width: 321px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
#media (min-width: 699px) {
.col-md-15 {
width: 20%;
float: left;
}
}
#media (min-width: 979px) {
.col-lg-15 {
width: 20%;
float: left;
}
}

Answer 1

Have a look here:
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
To have 6 columns in one row you can use col-XX-2 - where XX is the screen size abbreviation
In your example "col-md-2" used as class for your level-1 divs will result in:
|1| |2| |3| |4| |5| |6|