重新排列移动设备的容器答案

【问题标题】：Rearranging containers for mobile devices重新排列移动设备的容器
【发布时间】：2017-12-24 00:23:38
【问题描述】：

我想让我的桌面友好网站也适合移动设备。

This 是它在移动设备上的样子。

This 是我希望它寻找移动用户的方式。

这种布局背后的原因是它在桌面上看起来不错，每行有 2 列。

HTML代码：

<html>
 <div class="outer-container">
  <div class="inner-container">text</div>
  <div class="inner-container">img</div>
 </div>
 <div class="outer-container">
  <div class="inner-container">img</div>
  <div class="inner-container">text</div>
 </div>
 <div class="outer-container">
  <div class="inner-container">text</div>
  <div class="inner-container">img</div>
 </div>
</html>

CSS代码：

.outer-container{
  width:100%;
}

.inner-container{
  float:left;
  width:50%;
}

@media screen and (max-width:480px){
  .inner-container{
  width:100%;
  }
}

【问题讨论】：

标签： css html mobile containers

【解决方案1】：

您可以使用flex 来执行此操作。创建一个column 并使用子级的order 属性来重新组织你认为合适的。

.outer-container{
  width:100%;

}

.inner-container{
  float:left;
  width:50%;
}

@media screen and (max-width:480px){
  .inner-container{
  width:100%;
  }
  .outer-container {
    display: flex;
    flex-direction: column;
  }
  .t {
    order: -1;
  }
}

<html>
 <div class="outer-container">
  <div class="inner-container t">text</div>
  <div class="inner-container i">img</div>
 </div>
 <div class="outer-container">
  <div class="inner-container i">img</div>
  <div class="inner-container t">text</div>
 </div>
 <div class="outer-container">
  <div class="inner-container t">text</div>
  <div class="inner-container i">img</div>
 </div>
</html>

【讨论】：