可擴展的佈局過渡

Question

如何使這樣的佈局，這將使的轉變，如在當屏幕變小。在引導程序，彈性盒，角材料或原始CSS中以任何方式存在解決方案嗎？

Answer 1

這裏是什麼我想你想與角料嘗試 - CodePen

我能想到把「1」之間的「2」和「唯一的辦法3「對於較小的屏幕是爲」1「創建指令，該指令根據屏幕尺寸打開和關閉。

標記

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp"> 
    <div layout="row"> 
    <div flex="30" hide-xs layout="column"> 
     <one class="aDiv"></one> 
    </div> 
    <div layout="column" flex> 
     <div class="aDiv" style="background:pink; height:50px">2</div> 
     <div class="aDiv" hide-gt-xs show-xs layout="row" layout-align="center"> 
     <one flex="50"></one> 
     </div> 
     <div class="aDiv" style="background:orange; height:700px">3</div> 
    </div> 
    </div> 
</div> 

CSS

.aDiv { 
    margin: 10px 
} 

JS

angular.module（ 'MyApp的'，[ 'ngMaterial'， 'ngMessages']）

.controller('AppCtrl', function() { 
}) 

.directive("one", function() { 
    return { 
    template: '<div style="background:yellow; height:500px">1</div>' 
    } 
}); 

Answer 2

您可以使用Flexbox的像它下面做。

.wrapperDiv { display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; } 
 
.first, .second, .third { 
 
    border: 1px solid red; 
 
    flex: 1 100%; 
 
    } 
 
    .first { order: 2; } 
 
    .second { order: 1; } 
 
    .third { order: 3; } 
 
    @media only screen and (min-width : 768px) { 
 
    .first, .second, .third { 
 
     -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    } 
 
    .first { order: 1; } 
 
    .second { order: 2; } 
 
    .third { order: 3; } 
 
} 
 

<div class="wrapperDiv"> 
 
<div class="first"> 
 
1st div 
 
</div> 
 
<div class="second"> 
 
2nd div 
 
</div> 
 
<div class="third"> 
 
3rd div 
 
</div> 
 
</div>