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

As mentioned, there's no way to do this with the standard Bootstrap grid. However, with a few CSS tweaks it's possible, by adhering to these "rules"..

Put the sidebar first, and float it right..

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

Make the col-sm-7 width:auto, and un-float it..

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

Finally, any child DIV's inside the col-sm-7 need to be overflow: auto...

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

AFAIK, flexbox would not work well for this.

I can't see an easy way to do this in bootstrap (maybe in bootstrap 4 with flexbox...) - both sets of content are in very distinct containers. You could probably achieve it with a little javascript and some CSS hackery, but it wouldn't be advisable. The code in this example is untested.

Anyway, one potential method of doing this would be to put your sidebar in the same column as your blog content (eugh) and make each content col-7 and your sidebar col-5.

At this point, you could use jQuery to calculate which rows should be expanded to col-12 to fill up the space under the sidebar by comparing the height of the sidebar (say, 400) vs the height of columns (say, 100 each). This way, you'd know that 4 content items add up to 400 (the height of your sidebar). This means from the 4th element onward, you could change the class to 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