When it comes to organizing elements that stack, it's important to consider the specific placement of each element. In your scenario, B and A cannot be grouped together because Logo needs to be positioned between them in certain cases. You have a couple of options to address this issue.
To achieve the desired layout without utilizing JavaScript, one effective solution is as follows: view demo 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>
This implementation leverages row properties to adjust the positioning of A in the smaller screen (xs) case. The push/pull classes are utilized to rearrange the order of the divs for larger screens (sm). However, an issue may arise if Logo is taller than B, causing alignment problems. Unfortunately, this limitation cannot be easily resolved using only Bootstrap CSS.
Alternatively, incorporating JavaScript can provide a dynamic solution for moving the div when resizing the window. Check out the code snippet and example here: demo link
<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>
Here is the JavaScript code snippet:
$(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') );
}
});
});
Note: For more information on Bootstrap grid classes like push, pull, and offset, refer to the official Bootstrap grid documentation.