Bootstrap 3 - Make a div inside a column of the same height as other columns on the same row.

Question

According to the title, I tried to do it height:100% min-height:100%, etc., but that did not help.

The following of similar questions makes all columns equal heights, but I need the inner div to stretch 100% to fit the height of other columns on the same row.

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
        background-color: red;
}
.row {
    overflow: hidden; 
}

Other columns contain images with a class img-responsive, so they are automatically resized to fit the viewport, and this div in the question will contain text and an image.

Here is JS Fiddle

Answer 1

Yo table-row table-cell , col,

.row {
    display: table-row;
}

[class*="col-"]{
    background-color: red;

    float: none;
    display: table-cell;
}

Jsfiddle demo

Answer 2

@kariem CSS @media, :

@media (min-width: 768px) {

    .row {
        display: table-row;
    }

    [class*="col-"]{
        float: none;
        display: table-cell;
    }
}

min-width (col-lg-, col-md- ..). http://jsfiddle.net/davc6/23/