<div class="container">

    <div class="Placeholder Placeholder--small"></div>

</div>

​

<div class="container">

    <div class="row" data-sticky_parent>

        <div class="col-sm-8" data-sticky_column>

            <div class="Placeholder Placeholder--large"></div>

        </div>

        <div class="col-sm-4" data-sticky_column>

            <div class="Placeholder Placeholder--green"></div>

        </div>

    </div>

</div>

​

<div class="container">

    <div class="Placeholder Placeholder--small"></div>

</div>

​

<div class="container">

    <div class="row" data-sticky_parent>

        <div class="col-sm-4" data-sticky_column>

            <div class="Placeholder Placeholder--large"></div>

        </div>

        <div class="col-sm-8" data-sticky_column>

            <div class="Placeholder Placeholder--green"></div>

        </div>

    </div>

</div>

​

<div class="container">

    <div class="Placeholder Placeholder--small"></div>

</div>

​

<div class="container">

    <div class="row" data-sticky_parent>

        <div class="col-sm-6" data-sticky_column>

            <div class="Placeholder Placeholder--medium Placeholder--green"></div>

        </div>

        <div class="col-sm-3" data-sticky_column>

            <div class="Placeholder Placeholder--large"></div>

        </div>

        <div class="col-sm-3" data-sticky_column>

            <div class="Placeholder  Placeholder--small Placeholder--green"></div>

        </div>

    </div>

</div>

​

<div class="container">

    <div class="Placeholder Placeholder--large"></div>

</div>

$black: #000

$green: #0f0

​

.Placeholder

    height: 200px

    margin-top: 20px

    margin-bottom: 20px

    background-color: rgba($black, .2)

    &--small

        height: 100px

    &--medium

        height: 300px

    &--large

        height: 600px

    &--green

        background-color: rgba($green, .6)

(function() {

​

    'use strict';

​

    function activeStickyKit() {

        $('[data-sticky_column]').stick_in_parent({

            parent: '[data-sticky_parent]'

        });

​

        // bootstrap col position

        $('[data-sticky_column]')

        .on('sticky_kit:bottom', function(e) {

            $(this).parent().css('position', 'static');

        })

        .on('sticky_kit:unbottom', function(e) {

            $(this).parent().css('position', 'relative');

        });

    };

    activeStickyKit();

​

    function detachStickyKit() {

        $('[data-sticky_column]').trigger("sticky_kit:detach");

    };

​

    //  stop sticky kit

    //  based on your window width

​

    var screen = 768;

​

    var windowHeight, windowWidth;

    windowWidth = $(window).width();

    if ((windowWidth < screen)) {

        detachStickyKit();

    } else {

        activeStickyKit();

    }

​

    // windowSize

    // window resize

    function windowSize() {

        windowHeight = window.innerHeight ? window.innerHeight : $(window).height();

        windowWidth = window.innerWidth ? window.innerWidth : $(window).width();

​

    }

    windowSize();

​

    // Returns a function, that, as long as it continues to be invoked, will not

    // be triggered. The function will be called after it stops being called for

    // N milliseconds. If `immediate` is passed, trigger the function on the

    // leading edge, instead of the trailing.

    function debounce(func, wait, immediate) {

        var timeout;

        return function() {

            var context = this, args = arguments;

            var later = function() {

                timeout = null;

                if (!immediate) func.apply(context, args);

            };

            var callNow = immediate && !timeout;

            clearTimeout(timeout);

            timeout = setTimeout(later, wait);

            if (callNow) func.apply(context, args);

        };

    };

​

    $(window).resize(debounce(function(){

        windowSize();

        $(document.body).trigger("sticky_kit:recalc");

        if (windowWidth < screen) {

            detachStickyKit();

        } else {

            activeStickyKit();

        }

    }, 250));

​

})(window.jQuery);

​