Użycie bootstrap 3:

<div class="row row-fluid">
   <div class="col-md-6 col-md-push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of doom</p>
   </div>
</div>

To działa, ponieważ gdy jest wystarczająco dużo miejsca, na początku unoszą się do swoich pierwotnych pozycji. Jednak, gdy rozmiar do średniej i przestrzeń jest stracone, następnie stos, ponieważ nie mogą unosić się przez siebie. Zauważ, że podczas gdy użyłem kolumn 6 dla obu, działa to nawet jeśli nie są obie kolumny 6.

Oto link: http://ageekandhisblog.com/bootstrap-3-change-stacking-order/

Ogólnie rzecz biorąc, chcesz grupować elementy stosu, ale w Twoim przypadku B i A nie można grupować, ponieważ Logo musi być wstawiony między nimi w jednym przypadku. Masz dwie opcje

Bez używania JS, myślę, że to będzie twoja najlepsza opcja. fiddle here

<div class="container">
    <div class="logo col-sm-4 col-xs-6 col-sm-push-4">Logo<br/>Logo</div>
    <div class="contentB col-sm-4 col-xs-6 col-sm-pull-4">B</div>
    <div class="contentA col-sm-4 col-xs-6 col-xs-offset-6 col-sm-offset-0">A</div>
</div>

Chodzi o to, aby użyć właściwości rollover rows do przesunięcia A w dół w przypadku xs. Używam również klas push / pull do przestawiania div w przypadku sm. Problem polega jednak na tym, że jeśli Logo jest wyższy niż B. Ponieważ wszystko jest na tej samej siatce, A wyrównuje się z dnem większego elementu, dając nam przestrzeń między Logo I B. To naprawdę nie ma żadnego rozwiązania z czystym Bootstrap CSS. (Może ktoś mnie poprawi)

Zamiast tego sugeruję użycie JS, aby przenieść div, gdy okno zmieni rozmiar. fiddle here

<div class="container">
    <div id="column1" class="row col-xs-6 col-sm-8">
        <div id="B" class="col-xs-12 col-sm-6">B</div>
        <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
    </div>
    <div id="column2" class="row col-xs-6 col-sm-4">
        <div id="A" class="col-xs-12 col-sm-12 ">A</div>
    </div>
</div>

I JS

$(function() {
    $(window).resize(function() {
        var w = $(window).width();
        if (w < 768 && $('#column1').children().length > 1) {
            $('#B').prependTo( $('#column2') );
        } else if (w > 768 && $('#column2').children().length > 1) {
            $('#B').prependTo( $('#column1') );
        }
    });
});

Edytuj: Zapoznaj się z bootstrap grid docs, aby uzyskać informacje na temat klasy push/pull/offset.

Udało mi się to naprawić, zamieniając zawartość kolumn za pomocą jQuery, oto znaczniki:

<div class="container">
    <div class="row">
        <div class="col-sm-4 swap-col">
            columns 1
        </div>

        <div class="col-sm-4 swap-col">
            columns 2
        </div>

        <div class="col-sm-4 swap-col">
            columns 3
        </div>
    </div>
 </div>

A oto skrypt jQuery:

$(document).ready(function(){

    var col1_data,col2_data;

    col1_data = $(".footer-col:nth-child(1)").html();
    col2_data = $(".footer-col:nth-child(2)").html();

    var w = $(window).width();        

    if (w < 768)
    swap_columns();

    function swap_columns()
    {
        var w = $(window).width();
        if (w < 768)
        {
            $(".footer-col:nth-child(2)").html(col1_data);
            $(".footer-col:nth-child(1)").html(col2_data);
        }
        else
        {
            $(".footer-col:nth-child(1)").html(col1_data);
            $(".footer-col:nth-child(2)").html(col2_data);
        }
    }


    $(window).resize(function() {
        swap_columns();
    });
});

Nie jest to pełna odpowiedź, ale tutaj możesz dowiedzieć się o klasach responsywnych bootstrap3

Responsive Bootstrap3 css