0

I am using Bootstrap's grid to organize the layout of a webpage. Between lg and sm sizes, the webpage looks like this:

|col-1|col-2|

When the size of the window is in the xs range, the columns stack like this:

|col-1|

|col-2|

Instead, I want it to stack like this:

|col-2|

|col-1|

To do this, I created a function to switch the inner HTMLs of the div tags. It works some of the time, but occasionally col-1 is still above col-2. 

function mobileHandler() {
    var width=window.innerWidth;
    if (width<768) {

        var col1=document.getElementById('col1').innerHTML;
        var col2=document.getElementById('col2').innerHTML; 

        document.getElementById('col1').innerHTML=col2;
        document.getElementById('col2').innerHTML=col1;
    } 
}

window.onload=mobileHandler;
window.onresize=mobileHandler;

Is there a bug anyone can spot with my code? Or is there a better way to accomplish what I want?

ThanksInAdvance
  • 497
  • 2
  • 7
  • 13
  • 1
    Check out http://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap – Max Sindwani Jan 19 '17 at 02:02
  • Possible duplicate of [Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3](http://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap) – vanburen Jan 19 '17 at 02:41

2 Answers2

0

Just use push and pull features of bootstrap.

See the snippet below.

.cols{
  height:50px;
  border:1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-md-push-8 cols">
      col-2
    </div>
    <div class="col-xs-12 col-sm-12 col-md-8 col-md-pull-4 cols">
      col-1
    </div>
</div>
</div>
ab29007
  • 7,611
  • 2
  • 17
  • 43
0

Apply 'pull-right' to the col-1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 cols pull-right">
      col-md-4
    </div>
    <div class="col-xs-12 col-sm-12 col-md-8 cols">
      col-md-8
    </div>
  </div>
</div>
xhavit
  • 1
  • 1