How to make display:flex work for responsiveness - Bootstrap?

Question

I have a row with 3-cols and have a dropdown menu inside cols, which shows up below if I choose an option. When I click this option button the height of the columns extend/flex/increase and it works as it should. For that I just add this css element to row for full screen

@media only screen and (min-width: 1201px)
.payfullMajsticBlox .portlet-body > .row {
    display: flex;
}

This is my HTML code

<div class="payfullMajsticBlox">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-cogs font-green-sharp"></i>
            <span class="caption-subject font-green-sharp bold uppercase">POS AYARLARI</span>
        </div>
        <div class="tools">
            <a class="collapse" href="javascript:;" data-original-title="" title="">
            </a>
            <a class="config" data-toggle="modal" href="#portlet-config" data-original-title="" title="">
            </a>
            <a class="reload" href="javascript:;" data-original-title="" title="">
            </a>
            <a class="remove" href="javascript:;" data-original-title="" title="">
            </a>
        </div>
    </div>
    <div class="portlet-body">
        <!--<h4>Pulsate any page elements.</h4>-->
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
                <h6 class="payfullTitle">API Kullanıcı adı</h6>
                <div class="form-group form-md">
                    <input type="text" class="form-control" id="form_control_1" placeholder="Merchant ID">
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
                <h6 class="payfullTitle">Şifre</h6>
                <div class="form-group form-md">
                    <input type="text" class="form-control" id="form_control_1" placeholder="API Şifresi">
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
                <h6 class="payfullTitle">Mağaza Numarası</h6>
                <div class="form-group form-md">
                    <input type="text" class="form-control" id="form_control_1" placeholder="Client ID / Terminal">
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">

                <h6 class="payfullTitle">3D Secure kullan</h6>
                <div class="clearfix">
                    <div class="btn-group btn-group payfullBtns" data-toggle="buttons">
                        <label class="btn green active" id="P1BsecureS1">
                            <input type="radio" class="toggle">Varsayılan</label>
                        <label class="btn green" id="P1BsecureS2">
                            <input type="radio" class="toggle">3D Secure</label>
                    </div>
                </div>
                <br><br>

                <div id="P1B3DSecure" class="payfullShowHide" style="display: none;">
                    <h6 class="payfullTitle">Üye İş Yeri Anahtarı</h6>
                    <div class="form-group form-md">
                        <input type="text" class="form-control" id="form_control_1" placeholder="POS Net Id / Store key">
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

So initial view is this

When it is clicked

When it comes to be responsive I make display:flex disabled on tablet initial view, the height of the column which has a dropdown has different height then others. check it. The reasons of doing this is if I don't disabled it is not responsive add all.

When I enable display: flex; it becomes non-responsive and looks like this, which is non-responsive.

You can see a gif that I have shown how it acts

http://d.pr/i/iv8J/3rSricgh

The bottom line is

• If I set a row element property as display:flex, it becomes non-responsive.

Answer 1

Try something like this. Not exactly the content you posted. But this works with large content in one of the boxes as well.

Edit : Dynamically added content works as well.

$("#add").on("click",function(){
   	$(this).parent().prepend('<div class="added-content" >Added Content </div>');
});

.flexbox{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.flex-item{
  
  flex:1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
}
.flex-item p{
  margin: 10px 5px;
  padding: 10px;
  background:yellow;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
#add{
    padding:5px;
    background:red;
}
.added-content{
    background:blue;
    margin-bottom:5px;
    color:white;
}
.breakpoint{
  display:none;
}

@media all and (max-width: 1201px){
  .flex-item{
      flex: none;
      width:25%;
  }
}

@media all and (max-width: 601px){
  .flex-item{
      flex: none;
      width:50%;
  }
}

@media all and (max-width: 401px){
  .flex-item{
      flex: none;
      width:100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexbox">
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
      <p ><button id="add">Add Content on Click</button></p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Whole lot of content 
      Whole lot of content 
      Whole lot of content 
      Whole lot of content 
      Whole lot of content
        Whole lot of content 
      Whole lot of content  Whole lot of content 
      Whole lot of content  Whole lot of content 
      Whole lot of contentContent</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>

  
</div>

JSfiddle