Equal height columns with Bootstrap 3 and flexbox
<p>I'm working with Bootstrap 3 (unfortunately cannot change it to Bootstrap 4) and I need to achieve same-height columns effect like in the picture:
<a href="https://i.stack.imgur.com/WR55a.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WR55a.jpg" alt="enter image description here"></a>
I've succeded to get it working by using position absolute and @media screen for correct size of images and padding (yellow areas), but I believe there's better way to solve it.</p>

<p>I've found nice working code <a href="http://www.bootply.com/126437#" rel="nofollow noreferrer">here</a>, but adding picture on top destroys design - picture goes in additional column and streches all the content (<a href="http://www.bootply.com/vpbVtYY20w" rel="nofollow noreferrer">here</a>). Adding display:block brings me back to orignal problem - columns of different height. </p>

<p>I'm certain there's some clean and witty way to make it work!</p>

<p>EDIT:
So far I have a main row (green frame in the picture below) with 3 columns in it. What if I make 3 rows instead (red frames) and apply equal height only to the middle content? It would work well on big screens, but on small screens when column takes full width of screen, it would end up with 3 pictures one under another, three description parts one under another and three buttons one under another - definitely not what I want! Is there any way to rearrange the display of columns in such case, so I would get 3x picture-description-button? </p>

<p><a href="https://i.stack.imgur.com/k4BSy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k4BSy.jpg" alt="enter image description here"></a></p>

<p>edit2: snippet added</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,body {
 height:100%;
}
      
.row-flex, .row-flex &gt; 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 &gt; div[class*='col-'] div,.row-flex &gt; div[class*='col-'] div {
 width:100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;

&lt;/header&gt;
&lt;body&gt;
&lt;div class="container"&gt;&lt;h3&gt;.row-flex (make columns equal heights in each row)&lt;/h3&gt;&lt;/div&gt;
&lt;div class="container"&gt;
  &lt;div class="row row-flex row-flex-wrap"&gt;
 &lt;div class="col-xs-4"&gt;
      &lt;div class="well"&gt; 
        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.
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-4"&gt;
 &lt;img class="img-responsive" src="http://placehold.it/200x100"&gt;
     &lt;div class="well"&gt; 
        Duis pharetra varius quam sit amet vulputate.  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-4"&gt;
     &lt;div class="well"&gt; 
        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. 
      &lt;/div&gt;
    &lt;/div&gt;
   
  &lt;/div&gt;&lt;!--/row--&gt;
&lt;/div&gt;&lt;!--/container--&gt;
&lt;hr&gt;



&lt;/body&gt;</code></pre>
</div>
</div>
</p>