Bootstrap grid 3x3 to 6x2 to 9x1 - html

Question

Is it even possible and how can I create a bootstrap grid that's 3x3 for md columns. 6x2 for sm columns and 9x1 for xs columns?
3x3 to 9x1 seems to be easy.
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-12 col-md-4'>1</div>
<div class='col-xs-12 col-md-4'>2</div>
<div class='col-xs-12 col-md-4'>3</div>
</div>
<div class='row'>
<div class='col-xs-12 col-md-4'>4</div>
<div class='col-xs-12 col-md-4'>5</div>
<div class='col-xs-12 col-md-4'>6</div>
</div>
<div class='row'>
<div class='col-xs-12 col-md-4'>7</div>
<div class='col-xs-12 col-md-4'>8</div>
<div class='col-xs-12 col-md-4'>9</div>
</div>
</div>
But I can't figure out how to create the 6x2 in between.

Answer 1

unska try this
HTML
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>1</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>2</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>3</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>4</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>5</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>6</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>7</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l'>8</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray'>9</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l visible-sm'>10</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray visible-sm'>11</div>
<div class='col-xs-12 col-md-4 col-sm-2 gray-l visible-sm'>12</div>
</div>
</div>
css
.gray{background-color:#ccc}
.gray-l{background-color:#ececec}
Check this fiddle

Answer 2

You can place all these columns in one row.
Simply add col-sm-6 to each div and the third column will automatically shift to the next row.
You're basically already doing something similar for the xs-size.
Keeping the one row around all these columns, allows for the styling around them to stay intact.

Answer 3

Try this to see if it helps.
View this large view Fiddle and resize it to see how Bootstrap works.
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-orange block clear">6 x 6 <br> These will stay like this all the way down to xs size</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-primary block clear"></div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bg-orange block clear">3 x 3</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bg-primary block clear"></div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 bg-orange block clear"> 6 x 2</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bg-primary block clear"></div>
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bg-orange block clear">9 x 9</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 bg-primary block clear"></div>
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-3 col-sm-6 col-xs-9 bg-orange block clear">6 x 6 lg then change to 3 x 3 at md, then change to 6 x 2 at sm and then change at xs to 9 x 1.</div>
<div class="col-lg-6 col-md-3 col-sm-2 col-xs-1 bg-primary block clear"></div>
</div>