nested bootstrap columns

nested.html

<div class="container">
    <h3>Nested Insanity</h3>
    <div class="row example">
        <div class="col-md-6 col-xs-6 col-xs-12 grey">
            <span class="ex-title">These 2 md-6's (that are inside of an md-6) have different nested columns</span>
            <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-6 red">
                    col-6 #1
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-12 green">
                            6's until xs, then 12
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12 yellow">
                            6's until xs, then 12
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6 blue">
                    col-6 #2
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-6 orange">
                            6's all the way
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6 purple">
                            6's all the way  
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-6 col-xs-12">
            <span class="ex-title">This is 3 md-4's inside of an md-6 that will behave differently</span>
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12 orange">
                    md-4 sm-6 xs-12
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12 green">
                    md-4 sm-6 xs-12  
                </div>
                <div class="col-md-4 col-sm-12 col-xs-12 blue">
                    md-4 sm-12 xs-12
                </div>
            </div>
        </div>
    </div>
</div>