Bootstrap - Responsive Row and Column with 100% height - html

Question

I'm trying to make a responsive website and this is my layout as seen on the
desktop version. With the intended mobile version like so.
Because i'm trying to make the columns to fill 100% of the height in my browser, i have changed a few bootstrap codes. Is there anything that i should change in my code if my css is
html,body,.container{
height:100%;
}
.container{
display:table;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid black;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.row
{
height: 100%;
display: table-row;
}
.col-xs-6.no-float{
display: table-cell;
width: 50%;
padding: 0 0 0 0;
float: none;
}

Answer 1

It is wrong idea, bootstrap classes shouldn`t be changed. Write your custom css with custom classes.
<div class="container full-height-container">
<div class="row full-height-row">
<div class="col-md-6 col-xs-12 left full-height-col">
<div class="row">
<div class="col-md-4">
c1
</div>
<div class="col-md-4">
c2
</div>
<div class="col-md-4">
c3
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 right full-height-col">
test2
</div>
</div>
</div>
html,body{
height: 100%;
}
.left{
background: red;
}
.right{
background: yellow;
}
.full-height-container{
height: 100%;
}
.full-height-row{
height: 100%;
}
.full-height-col{
height: 100%;
}
Take a look: fiddle

Answer 2

Have you tried using media screen? That way you could set different sizes on different resolutions. For example:
#media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
It means if the resolution is 480 and less then the given example will apply. Also if you do not want to have these media screens in one css you can set them in the head section:
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">