How can I ensure a Bootstrap column expands to fit the width of its content when this value is changed?

Answer 1

You can use Flexbox for that, making all children's width change depending on content:

.col-sm-2 { border:1px solid; }

@media screen and (min-width: 480px) {
  .flex { display: flex; flex-wrap: wrap; }
  .flex > .col-sm-2 { flex: 1; width: auto; }
}

 RScheme 

  

    

    
Arrow
    
Compound
    
Arrow
    
Compound
    
Arrow
  

jsFiddle: http://jsfiddle.net/rbxth6ac/8/