Bootstrap - Change columns height on stack - html

Question

Using Bootstrap, I have a row and 3 column divs in my html and I have the css set to give the columns a height of 100%.
HTML:
<div class="row">
<div id="one" class="col-sm-4">one</div>
<div id="two" class="col-sm-4">two</div>
<div id= "three" class="col-sm-4">three</div>
</div>
CSS:
html,body,{
height:100%;
}
.col-sm-4{
border: 1px solid black;
height: 100%;
}
#one{
background-color: red;
}
#two{
background-color: blue;
}
#three{
background-color: green;
}
When the screen get small enough and the columns stack, I want to essentially change the height of the columns from 100% to 33.3333% so they don't exceed the height of the body. Then when the screen gets big and the columns unstack I want to change their height back to 100%. How do I do this?

Answer 1

Use a media query specifically for Bootstrap's xs breakpoint of <768px..
html, body, .container-fluid, .row {
height:100%;
}
.col-sm-4 {
border: 1px solid black;
min-height: 100vh;
}
#one{
background-color: red;
}
#two{
background-color: blue;
}
#three{
background-color: green;
}
#media (max-width: 767px) {
.col-sm-4 {
min-height: 33.3333333%;
height: 33.3333333%;
}
}
http://www.bootply.com/uXe60OvI4I
Also, remember the .row should always be used inside a container.

Answer 2

Add a new class called .whatever (I used .mydivs) in your css. You don't want to be attaching media queries to bootstrap defined selectors. Add the height values to the ".mydivs" class instead.
If you attach values to a bootstrap class if you use it again later on your page it will also be changing anywhere else you end up using it.
1.) Add
<div class="row">
<div id="one" class="mydivs col-sm-4 col-xs-12">one</div>
<div id="two" class="mydivs col-sm-4 col-xs-12">two</div>
<div id="three" class="mydivs col-sm-4 col-xs-12">three</div>
</div>
2.) Then Use Breakpoints
#media (max-width: 543px) {
.mydivs {
height: 33.3%;
}
}
#media (min-width: 544px) {
.mydivs{ height: 100%; }
}

Answer 3

Sounds like you want to use a media query.
#media(max-width: 500px) {
.col-sm-4 {
height: 33px;
}
}
This will change the height of .col-sm-4 whenever the viewport width is < 500px;
html,
body,
{
height: 100%;
}
.col-sm-4 {
border: 1px solid black;
height: 100px;
}
#one {
background-color: red;
}
#two {
background-color: blue;
}
#three {
background-color: green;
}
#media(max-width: 500px) {
.col-sm-4 {
height: 33px;
}
}
<div class="row">
<div id="one" class="col-sm-4">one</div>
<div id="two" class="col-sm-4">two</div>
<div id="three" class="col-sm-4">three</div>
</div>
(note that this is really hard to see here because this website has a fixed min width)