I use Bootstrap 3. The page must be adaptive, you need to work in the case when there will be two columns in a row. When opening the third column, it works as it should.

proper

not proper

var main = function() { $(".panel-heading").click(function() { $(this).siblings(".panel-body").slideToggle(240); }); } $(document).ready(main); 
 .panel-container { padding: 5px !important; } .container { height: 100%; } .panel-body { display: none; } .panel-heading:hover { cursor: pointer; } 
 <div class="panel-container col-lg-4"> <div class="panel panel-default"> <div class="panel-heading"> Head panel </div> <div class="panel-body"> Content... </div> </div> </div>

    1 answer 1

    Insert in every 3 (2) columns a block with .clearfix , according to this principle:

     <div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #1 --> <div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #2 --> <div class="clearfix visible-sm visible-md">...</div> <!-- Начинаем новый ряд для блоков по 2 в ряд --> <div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #3 --> <div class="clearfix visible-lg"></div> <!-- Начинаем новый ряд для блоков по 3 в ряд --> <div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #4 --> <div class="clearfix visible-sm visible-md">...</div> <!-- Начинаем новый ряд для блоков по 2 в ряд --> <div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #5 --> <div class="panel-container col-sm-6 col-lg-4">...</div> <!-- Блок #6 --> <div class="clearfix visible-sm visible-md">...</div> <!-- Начинаем новый ряд для блоков по 2 в ряд --> <div class="clearfix visible-lg"></div> <!-- Начинаем новый ряд для блоков по 3 в ряд -->
    • On xs screens - the blocks will be one in a row;
    • On sm - two, due to .col-sm-6 ;
    • On md - two each, .col-md-x not specified, it means the same as on the screen of the previous size;
    • On lg - three, due to .col-lg-4 .

    Due to .visible-xx - adjust the visibility (and actual effectiveness) of .clearfix blocks for different screen sizes.