нетривиальная отзывчивая сетка с использованием начальной загрузки

Question

Я пытаюсь получить следующий адаптивный макет с Bootstrap 3, но до сих пор я не смог:

Md и LG экраны:

+-------+-------+------+ 
| A | B | C | 
+-------+  +  + 
| D |  +------+ 
|  +-------+ E | 
+-------+  +------+ 

хз экранов :

+-------+ 
| A | 
+-------+ 
| B | 
+-------+ 
| D | 
+-------+ 
| E | 
+-------+ 

SM экраны (бонус):

+-------+-------+ 
| A | B | 
+-------+  + 
| D |  | 
|  +-------+ 
|  | E | 
|  +-------+ 
+-------+ 

Возможно ли это?

ОБНОВЛЕНИЕ: вот что я сделал до сих пор: jsfiddle.

Моя самая первая попытка использовала вложенные столбцы, как предлагает @Filype, но я понял, что таким образом я не могу перемещать элементы из вложенных столбцов, поэтому я думаю, что это неправильный путь.

Answer 1

Вот начало о том, как реализовать эту схему в загрузчике:

<!-- 
+-------+-------+------+ 
| A | B | C | 
+-------+  +  + 
| D |  +------+ 
|  +-------+ E | 
+-------+  +------+ 
--> 


<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="row"> 
       <div class="col-md-12"> 
        A 
       </div> 
       <div class="col-md-12"> 
        D 
       </div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="row"> 
       <div class="col-md-12 b-row"> 
        B 
       </div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="row"> 
       <div class="col-md-12"> 
        C 
       </div> 
       <div class="col-md-12"> 
        E 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Результат версию можно увидеть в https://jsfiddle.net/dvbnchp4/3/embedded/result/