Bootstrap 3 change fullwidth column order

Question

Один из наших дизайнеров создал макет, где порядок содержимого нижнего колонтитула изменяется с рабочего стола на мобильный. Я использую bootstrap и хотел бы сделать это как можно проще. Я считаю, что следующая правильная разметка, но она не работает для столбцов полной ширины?

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12 col-sm-push-12"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <p>Ooo content</p> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-12 col-sm-pull-12"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <p>Ooo more content</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Пример: https://jsfiddle.net/rwydcepc/

Целью вышесказанного является переключение верхней части колонны с нижней колонке, когда sm применяется. Кажется, это не происходит, и все прикручивается?

Есть ли другой способ сделать это с помощью бутстрапа или с помощью некоторых простых дополнительных CSS, в идеале я бы хотел, чтобы избегал дублирования контента и показывал/скрывал или полагался на Javascript.

Существует аналогичный вопрос здесь, но это не дает ответа на вопрос: Change the order of col-*-12 columns in Bootstrap 3 by using push/pull

Answer 1

Существует уже решение с использованием Bootstrap reordering, но не на 100% ширины столбцов, ниже решение использует Flexbox метод.

@media (max-width: 768px) { 
 
    .reorder .row { 
 
    display: flex; 
 
    display: -ms-flex; 
 
    flex-direction: column; 
 
    } 
 
    .reorder .row .item1 { 
 
    order: 2; 
 
    } 
 
    .reorder .row .item2 { 
 
    order: 1; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container reorder"> 
 
    <div class="row"> 
 
    <div class="col-sm-12 item1"> 
 

 
     <p>Ooo content</p> 
 

 
    </div> 
 
    <div class="col-sm-12 item2"> 
 

 
     <p>Ooo more content</p> 
 

 
    </div> 
 
    </div> 
 
</div>