Flexbox breaks bootstrap responsiveness
<p>I have a row where one column can vary in height so I don't know how high it will be. In order to properly space the adjacent column I have used nested flex boxes.</p>

<p>This works fine on main break point but as soon as I add the flex box then this breaks the responsiveness as the columns don't stack on mobile anymore.</p>

<p>What should I do here?  Should I drop flexbox?  How else can I achieve this spacing?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container{
  margin-top: 60px;
}
 .container{
  border: 1px solid #000;  
}
.row{
  display: flex;
}
.row-center{
  display: flex;
  flex: 1;
}

.outer{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border: 1px solid #000;
  width: 100%;
}

.one, .two, .three{
  flex: 0 0 40px;
  border: 1px solid #000;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;


&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-xs-12 col-sm-6"&gt;&lt;img src="http://placehold.it/350x500"&gt;&lt;/div&gt;
    &lt;div class="col-xs-12 col-sm-6 row-center"&gt;
      &lt;div class="outer"&gt;
        &lt;div class="one"&gt;some text&lt;/div&gt;
        &lt;div class="two"&gt;some text&lt;/div&gt;
        &lt;div class="three"&gt;some text&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>jsfiddle mirror: <a href="https://jsfiddle.net/y68dnzwy/" rel="noreferrer">https://jsfiddle.net/y68dnzwy/</a></p>