スケーラブルレイアウト遷移

Question

画面が小さくなるとのように遷移するようなレイアウトを作る方法。ブートストラップ、フレックスボックス、アンギュラマテリアル、あるいは何らかの方法でプリミティブCSSに解決策がありますか？

Answer 1

ここで私はあなたがアンギュラ材料としたい考える何の試みだ - 「CodePen

は「2」との間に、私は「1」を置くことを考えることができる唯一の方法と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

これは、以下のようにフレックスボックスを使用して行うことができます。

.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>