1

As suggested here I've used display: table on row and display: table-cell on columns.

Fiddle: http://jsfiddle.net/kA4yg/3/.

it seems to work, but columns do not stack on top of each other (just resize the fiddle demo) under the breakpoint (in this case, under medium-device resolution).

<div class="row row-table">
    <div class="col-md-4 col-cell" style="background-color: #8bc34a;">
         <h1>A</h1>
    </div>
    <div class="col-md-4 col-cell" style="background-color: #795548;">
        <p>b</p>
    </div>
    <div class="col-md-4 col-cell" style="background-color: #90a4ae;">
        <p>c</p>
    </div>
</div>

CSS:

.row.row-table {
    display: table;
}
.row [class*="col-"].col-cell {
    display: table-cell;
    float: none;
    vertical-align: top;
}

Is there any way I can fix this, making it work like the "standard Bootstrap way", i.e. .col-lg-6 stack under large-device, .col-md-4 stack under medium-device, and so on?

Community
  • 1
  • 1
gremo
  • 47,186
  • 75
  • 257
  • 421
  • you want it to stack ontop of eachother? – vico Jun 26 '14 at 20:34
  • @vico I'd like to make them work just like the work normally, ie if you have two columns with .col-md-6, then they stack on top of each other under md (that is, sm). – gremo Jun 26 '14 at 20:35

1 Answers1

0

easy use @media tag and only apply the table display settings on screen sizes that you want it to look like this and then it will act normally when not.

@media only screen and (min-width 1200px) {
.row.row-table {
    display: table;
}
.row [class*="col-"].col-cell {
    display: table-cell;
    float: none;
    vertical-align: top;
}

}

you did have to check the screen sizes css on the exact number on bootstrap

vico
  • 2,152
  • 2
  • 17
  • 38
  • Sure, but this solution is not flexible. When you use `col-md-* col-cell` you need to write a media query to set up `display: table` when resolution is md (or upper). So on for `col-xs`, `col-lg`, etc... – gremo Jun 26 '14 at 20:39
  • @gremo not sure exactly what you mean sorry, can you clarify? maybe this? http://jsfiddle.net/kA4yg/4/ – vico Jun 26 '14 at 20:49
  • sorry, I'll try to make an example fiddle. – gremo Jun 26 '14 at 20:50