Working with Bootstrap 3 (unable to switch to Bootstrap 4) and looking to achieve the same-height columns effect as shown in the image: https://i.sstatic.net/WR55a.jpg Managed to get it done using position absolute and @media screen for image size and padding adjustments, but I believe there's a more efficient solution.
Discovered functional code here, but adding an image at the top disrupts the design - the picture ends up in an extra column stretching all content (here). Using display:block brings back the original issue of varying column heights.
Certain that there is a clean and clever way to solve this!
EDIT: Currently have a main row (green frame in the image below) with 3 columns. What if we create 3 rows instead (red frames) and apply equal height only to the middle content? Would work on larger screens, but on smaller screens where each column takes full width, it would result in 3 pictures stacked vertically, along with descriptions and buttons - not ideal! Is there a way to rearrange the column display for such cases to have 3x picture-description-button?
https://i.sstatic.net/k4BSy.jpg
edit2: snippet added
html,body {
height:100%;
}
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}<header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</header>
<body>
<div class="container"><h3>.row-flex (make columns equal heights in each row)</h3></div>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-xs-4">
<div class="well">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
</div>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/200x100">
<div class="well">
Duis pharetra varius quam sit amet vulputate.
</div>
</div>
<div class="col-xs-4">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi.
</div>
</div><!--/row-->
</div><!--/container-->
<hr>
</body>