可扩展的布局过渡

Question

如何制作这样的布局，当屏幕变小时会像那样进行过渡。 bootstrap、flex box、angular material 或原始 css 中是否有解决方案？

Answer 1

您可以像下面这样使用 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>

Answer 2

这是我认为你想要的 Angular Material - 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>'
  }
});

可扩展的布局过渡

Scalable layout transition

css

flexbox

twitter-bootstrap

angular-material