Bootstrap responsive images script to fetch the appropriate sized image based on the breakpoint and column width.

BootstrapResponsiveImages.js

function findBootstrapEnvironment() {
    var envs = ['xs', 'sm', 'md', 'lg'];

    var $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
}

function responsiveBootstrapImages() {
  $('img[data-src]').filter(function(index){return !$(this).attr('src');}).each(function() {
    var en = findBootstrapEnvironment();
      var el = $(this).closest('*[class*="col-'+en+'"]');
        var cl = el.attr('class').split(" ");
        var col = 1;
        for( var i = 0, l = cl.length; i<l; ++i ) {
          var re = new RegExp(en, 'g');
          if(cl[i].match(re)) {
            col = cl[i].slice(-1);
          }
        }
        $(this).attr('src',$(this).data('src')+'&r=4:3&s='+en+'&m='+col); // Use your own thumbnail library logic here.
  });
}