I've managed to create a functioning jsfiddle example with the following JavaScript code:
$(".blah").on('click', function () {
$(this).removeClass('col-md-9');
$(this).toggleClass('col-md-3 col-md-9');
$('.blah').not(this).toggleClass('col-md-3 col-md-1');
});
This script allows me to achieve my goal of using Bootstrap to create 4 columns that always add up to a total width of "12". Currently, when I click on a column, it expands while the others shrink accordingly. However, I'm facing an issue where if one column is already set to col-md-9, clicking on another column should enlarge it and shrink the rest. On my test page, this functionality works perfectly by displaying the columns side by side. Despite not understanding why this isn't replicated in the jsfiddle example, the concept remains clear. My intention is for the clicked column to always be larger than the others, unless I click on the already expanded column, which should then reset all columns to equal sizes.