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.