Bootstrap reorder left to right and right to left then break right to new line

Question

Given I have this snippet

<div class="container">
    <div class="row">
        <div id="left" class="col-xs-5 col-sm-5">
          How are you?
        </div>
        <div id="right" class="col-xs-7 col-sm-7">
          Thanks, I'm fine.
        </div>
    </div>
</div>

If open on browser it should display

How are you? Thanks, I'm fine.

When browser is reduced to less than 768px I want the above snippet to yield

Thanks, I'm fine.
How are you?

I am using the following javascript to detect when viewport width of browser is <=767.

 /*
  @Leo
  Obtained from: 
  http://stackoverflow.com/questions/1766861/find-the-exact-height-and-width-of-the-viewport-in-a-cross-browser-way-no-proto
*/

var getviewport = function(){

    var viewPortWidth;
    var viewPortHeight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
        viewPortWidth = window.innerWidth,
        viewPortHeight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0) {
        viewPortWidth = document.documentElement.clientWidth,
        viewPortHeight = document.documentElement.clientHeight
    }

     // older versions of IE
    else {
        viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
        viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
    }
    return [viewPortWidth, viewPortHeight];
};

var adjust = function(){
    var width = getviewport()[0];

    if(width<=767){
        $("#left").addClass("col-xs-push-7");
        $("#right").addClass("col-xs-pull-5");
    }
    else{
        $("#left").removeClass("col-xs-push-7");
        $("#right").removeClass("col-xs-pull-5");       }
};
adjust();
$(window).resize(adjust);

So when the viewport width is <=767. I try to order the statement

"How are you? Thanks, I'm fine." to  "Thanks, I'm fine. How are you?

By adding corresponding xs-push-* and xs-pull-* I was able to achieve the above ordering to "Thanks, I'm fine. How are you?"

However, I feel something can be further done to break the statement to

Thanks, I'm fine.
How are you?

I will be glad if someone can offer help.

Answer 1

If I understand your question correctly, you can actually do this entirely with Bootstrap, no js needed!

To style the way it looks below the 768px breakpoint, just use col-xs-. To style the way it looks above 768, use col-sm-. You can't swap the order of the stacked columns (it'll always be the order they appear in the same order as in the markup), but you can use push and pull to change the order above the 768 breakpoint.

1. In the markup, order your columns the way you want them to appear when stacked
2. Add your xs classes - I'm not sure I understand what you want, but I think .col-xs-10.col-xs-offset-1
3. Add your "bigger-than-xs" classes. So .col-sm-5 and .col-sm-7, remove the offsets with .col-sm-offset-0, and then switch the order by pushing the one column and pulling the other

Here's a working snippet. View it full-window to see how it works above 768. The result will look like this:

Wide (Bootstrap sm and above):

Narrow (Bootstrap xs):

(The pink area is just to show that the stacked columns are centered col-10)

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';

/* all of this just for demo purposes */
 body {
  margin: 10px;
}
.container {
  background: rgba(255,0,0,.4);
}
.row div {
  border: 1px solid #000;
  background: #fff;
  height: 40px;
}
.row div:first-child {
  background: #000;
  color: #fff;
}

<div class="container">
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-push-7 col-sm-offset-0"></div>
    <div class="col-xs-10 col-xs-offset-1 col-sm-7 col-sm-pull-5 col-sm-offset-0"></div>
  </div>
</div>