How to dynamically change col bootstrap width to fit other columns?

Question

Let's say we created a row in bootstrap, and then added two columns, one for the content of the blog, on the left side (col-sm-7) and one more for the sidebar (col-sm-5), on the right side.

is there a way for the content in col-sm-7 to expand to col-sm-12 when the height of col-sm-5 is less than the height of col-sm-7 (or, in other words: when there is no content on the sidebar ?: let them say that the user adds only one widget. The problem is that the sidebar will occupy the entire right side, which looks bad.)

Here is an image to show what I mean:

Answer 1

, Bootstrap. , CSS , "".

.

<div class="col-sm-5 pull-right">
            ..
</div>

col-sm-7: .

.float-none {
    float: none;
    width: auto;
}

, DIV col-sm-7 overflow: auto...

: http://www.codeply.com/go/njEg31ZG33

AFAIK, flexbox .

Answer 2

bootstrap (, bootstrap 4 flexbox...) - . , javascript CSS, . .

, , (eugh), content col-7 sidebar col-5.

jQuery , col-12, , (, 400) (, 100 ). , , 4 content 400 ( ). , 4- col-12.

var contentItems = $(".content"); // your 'content' items
var sidebar = $(".sidebar");
var contentItemHeight = $(".content").first().height;
var sidebarHeight = $(".sidebar").height;

var smallColumns = sidebarHeight / contentItemHeight; // 4
var $i = 1;

$.each($contents, function(){
  if($i <= smallColumns){
    // Next to sidebar
    $(this).addClass(".col-xs-7");
  }else{
    // Below sidebar
    $(this).addClass(".col-xs-12");
  }
})

// Edited to remove accidental switch to PHP