Figuring this out was quite challenging. After some brainstorming, I managed to come up with a solution that involves integrating a bit of jQuery for the desired outcome.

Below is the html structure where I made some modifications to the columns:

<div class="container text-center">  
    <div class="row">   

        <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
            <div class="alert alert-warning">A</div>
        </div>   

        <div class="col-sm-8 col-lg-6 col-lg-pull-0 big">
            <div class="alert alert-danger">C</div>
        </div>  

        <div class="col-sm-4 col-lg-3 col-lg-pull-9 small">  
            <div class="alert alert-info">B</div>
        </div>     

    </div>
</div>

Additionally, I have included the jQuery script that dynamically switches the display based on the window width:

<script>
          var $iW = $(window).innerWidth();
          if ($iW < 768){
             $('.small').insertBefore('.big');
          }else{
             $('.big').insertBefore('.small');
          }
    </script>

It is important to note that the jQuery used here is not directly linked to window resizing post document load, but this can be adjusted by incorporating $(window).resize(function(){});

If you prefer to avoid JavaScript altogether, there is an alternative solution that involves duplicating one of the blocks. This method can work well if the content within that block is static. Below is the modified html structure:

<div class="container text-center">
     <div class="row">   

        <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
            <div class="alert alert-warning">A</div>
        </div>   

         <div class="col-sm-4 small-screen-only">  
            <div class="alert alert-info">B</div>
        </div>   

        <div class="col-sm-8 col-lg-6 col-lg-pull-0 big">
            <div class="alert alert-danger">C</div>
        </div>  

        <div class="col-sm-4 col-lg-3 col-lg-pull-9 small">  
            <div class="alert alert-info">B</div>
        </div>     

    </div>
</div>

The CSS code provided ensures the duplicated block B only displays on smaller screens:

       .small-screen-only{
            display: none;
        }

        @media all and (max-width: 767px)
        {
            .small-screen-only{
                display: block
            }

            .small{
                display: none;
            }
        }

Personally, I recommend the CSS approach as it aligns better with the browser's native functionality. Even for dynamically added block content, there are ways to adapt this setup to suit your requirements.

To achieve a CSS-only solution, you can position column C absolutely in relation to the .row at the breakpoint sm and clear column B. Your HTML & CSS can remain the same with the following additional CSS:

@media screen and (min-width: 768px) and (max-width : 1200px) {

    .row {
        position:relative;
    }

    .col-sm-4:nth-child(2) {
        clear:left;
    }

    div[class^="col-"]:last-child {
        position:absolute;
        right:0;
    }

}

One drawback of this method is that the .row may not clear properly if the height of Column C exceeds the combined height of Column A + B, as discussed in Clearfix with absolute positioned elements.

You can view an updated version of your Codepen here.

After making some minor adjustments to the HTML code, I incorporated two different jQuery methods to accomplish the desired functionality. Feel free to choose the approach that best suits your needs.

HTML-

<div class="container text-center">  
    <div class="row">   

        <div class="col-sm-4 col-lg-3 col-lg-push-9"> 
            <div class="alert alert-warning">A</div>
        </div>   

        <div class="col-sm-4 col-lg-3 col-lg-pull-3 B">  
            <div class="alert alert-info">B</div>
        </div>     

        <div class="col-sm-8  col-lg-6 col-lg-pull-3 C">
            <div class="alert alert-danger" >C</div>
        </div>  

    </div>
</div>

jQuery(1st way)-

 var wH = $(window).innerWidth();
              if (wH < 992 && wH>=768){
                 $('.C:parent').each(function () {
                    $(this).insertBefore($(this).prev('.B'));
                 });
              }else if(wH<768 || wH>=992)
              {
                 $('.B:parent').each(function () {
                    $(this).insertBefore($(this).prev('.C'));
              });   
}
$(window).resize(function() {
          wH = $(window).innerWidth();
          if (wH < 992 && wH>=768){
             $('.C').insertBefore('.B');        
          }else if(wH<768 || wH>=992)
          {
             $('.B').insertBefore('.C');        
          }
          })

Check out this fiddle: http://jsfiddle.net/SkyT/wVVbT/150/

jQuery(2nd way)-

var wH = $(window).innerWidth();
              if (wH < 992 && wH>=768){
                 $('.C').insertBefore('.B');        
              }else if(wH<768 || wH>=992)
              {
                 $('.B').insertBefore('.C');        
              }
$(window).resize(function() {
              var wH = $(window).innerWidth();
              if (wH < 992 && wH>=768){
                 $('.C:parent').each(function () {
                      $(this).insertBefore($(this).prev('.B'));
                 });
              }else if(wH<768 || wH>=992)
              {
                 $('.B:parent').each(function () {
                      $(this).insertBefore($(this).prev('.C'));
                 });    
              }
              })

Checkout this fiddle:https://jsfiddle.net/SkyT/tst5g7ec/1/