可扩展的布局过渡

Question

当屏幕变小时，如何制作将在中进行转换的布局。在bootstrap，flex box，angular material或者在原始css中是否有解决方案？

Answer 1

你可以使用下面的flexbox来完成它。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用Angular Material尝试我想要的 - CodePen

我能想到放置＆＃34; 1＆＃34;的唯一方法介于＆＃34; 2＆＃34;和＆＃34; 3＆＃34;对于较小的屏幕，是为＆＃34; 1＆＃34;根据屏幕尺寸打开和关闭。

标记

<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（＆＃39; MyApp＆＃39;，[＆＃39; ngMaterial＆＃39;，＆＃39; ngMessages＆＃39;]）

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

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