0

I have two bootstrap columns. On small devices, the second column should wrap and be displayed in a new line. On other devices, the two columns should be displayed next to each other. The first column is higher than the second one, but its height differs. If (and only if) the two columns are displayed next to each other, I want to display the second column vertically centered according to the first one. If they are displayed below each other, there should be no extra space.

Please see the following example (run in fullscreen and resize the browser window).

.row {
  border: 1px solid;
}
.flatcol {
  background-color: #009966;
}
.highcol {
  background-color: #0099FF;
  height: 75px; /* this will be changed, fixed value only for testing purposes */
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 highcol">a</div>
    <div class="col-md-4 flatcol">b</div>
  </div>
</div>

I tried to use vertical-align:middle for the second column, but it didn't change anything.

Do you have any idea how to modify the flatcol CSS class so the example works as intended?

muffel
  • 7,004
  • 8
  • 57
  • 98

1 Answers1

2

You could use a media query to display the columns inline on wider screens only..

@media screen and (min-width: 992px) {
  .col-md-4 {
    vertical-align: middle;
    display: inline-block;
    float:none;
  }
}

Demo: http://www.bootply.com/FiSIZAvCBC

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624