Bootstrap: Переупорядочение столбцов

Question

Я пытаюсь создать сетку с Bootstrap 3, которая выглядит следующим образом.

Гол

SM

MD

подход 1

<div class="container"> 
    <div class="row"> 
     <div class="col-md-9"> 
      <div class="alert alert-info">Content1</div> 
     </div> 
     <div class="col-md-3"> 
      <div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div> 
     </div> 
     <div class="col-md-9"> 
      <div class="alert alert-info">Content2</div> 
     </div> 
    </div> 
</div> 

Моя проблема в том, что я не знаю, как вытащить «Содержание 2» в МД так:

подход 2

<div class="container"> 
    <div class="row"> 
    <div class="col-md-9"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="alert alert-info">Content1</div> 
     </div> 
     <div class="col-md-12"> 
      <div class="alert alert-info">Content2</div> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div> 
    </div> 
    </div> 
</div> 

Проблема здесь в том, что я не могу (или не знаю, как) реорганизовать его в SD, так что Sidebar появляется между Содержание 1 и Content 2 или переключить Content 2 с Sidebar.

https://jsfiddle.net/q7bc836a/3/

Answer 1

Если вы готовы добавить больше CSS, сочетающий в себе ответ из приведенного ниже вопроса, и используя pull-md-right на боковой панели, чтобы тянуть вправо в мД, он показывает, как вы спросите

HTML (на основе подхода 1):

<div class="col-md-3 pull-md-right"> 
     <div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div> 
    </div> 

CSS (от https://stackoverflow.com/a/21136667/5699206):

@media (min-width: 992px) and (max-width: 1199px) { 
    .pull-md-left { 
     float: left; 
    } 
    .pull-md-right { 
     float: right; 
    } 
} 

https://jsfiddle.net/nbypupe6/