Flexbox breaks bootstrap responsiveness

Question

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.

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.

What should I do here? Should I drop flexbox? How else can I achieve this spacing?

.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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


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

jsfiddle mirror: https://jsfiddle.net/y68dnzwy/

Answer 1

May be this help you:

.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;
}
/* Added: */
@media screen and (min-width:100px) and (max-width: 980px) {
  .row-center {
    flex: auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6"><img src="http://placehold.it/350x500"></div>
    <div class="col-xs-12 col-sm-6 row-center">
      <div class="outer">
        <div class="one">some text</div>
        <div class="two">some text</div>
        <div class="three">some text</div>
      </div>
    </div>
  </div>
</div>

Demo

Answer 2

Used this with bootstrap 3, 4-text boxes in row with same height depending on the dynamic text, where on tablet and mobile are only 2 in row. And with tetx centered in middle

Somehow this flex magic makes on mobile, that only text boxes that are in same row have same height, so if last item is super tall, only last 2 items are super tall, not affecting first 2.

   <div class="row row-flex-box">
        <div class="col-xs-6 col-sm-6 col-md-3">
            <div class="thumbnail flex-col-vertical-center">
                <div class="caption"><span>text text text text</span></div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6  col-md-3">
            <div class="thumbnail flex-col-vertical-center">
                <div class="caption"><span>text text text text text text text text</span></div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6  col-md-3">
            <div class="thumbnail flex-col-vertical-center">
                <div class="caption"><span>text text text text</span></div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-6  col-md-3">
            <div class="thumbnail homepage-slider-bottom-block-single flex-col-vertical-center">
                <div class="caption"><span>text text text texttext text text texttext text text text</span></div>
            </div>
        </div>
    </div>

Css:

.row-flex-box {
    display: flex; /* make cols same heigh */
    flex-wrap: wrap; /* alows responsive behavior of cols (otherwise cols will never break on mobile)*/
}

.flex-col-vertical-center {
    display: flex; /* specifing display/flex-direction/justifi-content only because i want to have text aligned in the middle of boxes much cleaner than display:table-cell way*/
    flex-direction: column;
    justify-content: center;
    text-align:center;
    height: 100%; /* since cols have bigger height this has effect, also can be ussefull - height: calc(100% - 15px); with 15px bottom margin */
}