Best way to make Bootstrap responsive based on parent div?

Question

I need a container in bootstrap to be responsive based on the parent div instead of a media query. I can't figure out the best way without to do it, particularly without using javascript, if possible. Currently, on resize, I'm calculated if .span* divs should be 100% width (if the parent div ends up below 640px) or respect the columning CSS.

Here is a jsfiddle. With the CSS on .somecontainer the .span*'s inside should layout as if it's mobile - so each column should go full width, if you change the CSS to above 640px, for example, it would re-layout to the columns layout.

Any ideas?

Currently using code similar to this (which is not ideal)

$(document).ready(function(){
  $('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 640) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
  });
});

http://jsfiddle.net/tsdexter/ArqUR/1/

Answer 1

By using the elementQuery polyfill you should be able to accomplish this. Here is the repo on gitHub, here is an article on Smashing Magazine that explains more about the concept and here is a CodePen the author created to demonstrate how to use it.

Essentially you use CSS to define breakpoints based on the parent div. Here is an example of the syntax:

header[min-width~="500px"] {
    background-color: #eee;
}

Here is a relevant quote from the Smashing Article:

Introducing the element query. An element query is similar to a media query in that, if a condition is met, some CSS will be applied. Element query conditions (such as min-width, max-width, min-height and max-height) are based on elements, instead of the browser.