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

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

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


POS AYARLARI

API Kullanıcı adı

Şifre

Mağaza Numarası

3D Secure kullan

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.

Related:  why -webkit-transform: translate3d(0, 0, 0) messes up with fixed childs

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.

Solutions/Answers:

Solution 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

Related:  jQuery link for bootstrap

Solution 2:

Just add this script and apply this class eq_col to the DIVs you want equal height, it will work in all screen sizes.

Let me know any issue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var highestBox = 0;
        $('.eq_col').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.eq_col').height(highestBox);

});
</script>

References