可扩展的布局过渡

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>