Неподходящее назначение JavaScript JavaScript

Question

Я использую сетку Bootstrap для организации макета веб-страницы. Между размерами lg и sm, веб-страница выглядит следующим образом:

| col-1 | col-2 |

Когда размер окна находится в диапазоне хз, колонны укладывают так:

| Col-1 |

| col-2 |

Вместо этого, я хочу, чтобы стек так:

| Col-2 |

| col-1 |

---

Чтобы сделать это, я создал функцию, чтобы переключить внутренний HTMLs тегов Div. Он работает некоторое время, но иногда col-1 все еще находится выше 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; 

Есть ошибки, которые могут быть обнаружены с помощью моего кода? Или есть лучший способ добиться того, чего я хочу?

Answer 1

Просто используйте push и pull особенности бутстрапа.

См. Фрагмент ниже.

.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>

Answer 2

Применить 'тянуть-право' седловине-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>