Переупорядочение столбцов в Bootstrap 3 не работает должным образом

Question

Я пытаюсь переупорядочить мои столбцы, когда они сжимаются до мобильного телефона.

Например, в приведенном ниже примере столбец A находится слева, а столбец B находится справа для всех экранов, кроме мобильного (xs).

Когда удаленная точка останова xs получает удар, A находится сверху, а B - снизу. Желаемое поведение состоит в том, что B должен быть сверху, а A должен быть внизу. Я сделал пример простым, но мне также нужно сделать это с более чем двумя столбцами.

.a{ 
 
    background-color: darkred; 
 
    color: #fff; 
 
} 
 
.b{ 
 
    background: darkgrey; 
 
} 
 
.a,.b{ 
 
    font-size: 40px; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-6 a">A</div> 
 
    <div class="col-xs-12 col-sm-4 b">B</div> 
 
    </div> 
 
</div>

JSfiddle зеркало: https://jsfiddle.net/hfd9jm5e/

Я попробовал все комбинации Col-хв-толчке/толкай я могу думать, но это не похоже на работу, как документация описывает ,

Как изменить порядок строк на мобильном устройстве?

Answer 1

Try:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-4 col-sm-push-6 b">B</div> 
    <div class="col-xs-12 col-sm-6 col-sm-pull-4 a">A</div> 
    </div> 
</div> 

Я изменил вашу скрипку выше, и, казалось, прекрасно работать.