Bootstrap упорядочение 3 колонки на коллапсу

Question

У меня есть эти два столбца внутри строки:

   <div class="row"> 
        <div class="col-lg-4 col-md-4 col-sm-4"> 
         <p>Column A</p> 
        </div> 
        <div class="col-lg-8 col-md-8 col-sm-8"> 
         <p>Column B</p> 
         <div style="padding:10px;" class="text-center"> 
          <a href="#" class="btn btn-dark pulse2"></a> 
         </div> 
        </div> 
       </div> 

Так что Whe размер экрана превращается в хз они разрушаются в таком порядке:

Колонка A

Столбец B

Но как я могу заставить их рухнуть в другую сторону? Из других вопросов я красный Я попытался добавить класс col-sm-pull-8 в столбец A и col-sm-push-4 в колонку B.

Но это не работает, это просто испортите макет, и они до сих пор рассыпаться, как:

Колонка A

Колонка B

Answer 1

Col-см-вытяжным 8 и Col-см -задвинуть-4 отлично работает, нужно просто поменять ваш заказ:

<div class="row"> 
    <div class="col-lg-8 col-md-8 col-sm-8 col-sm-push-8"> 
     <p>Column B</p> 
     <div style="padding:10px;" class="text-center"> 
      <a href="#" class="btn btn-dark pulse2"></a> 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-sm-4 col-sm-pull-4"> 
     <p>Column A</p> 
    </div> 
</div> 

http://jsfiddle.net/yutngfjw/