html - 更改响应式 3 列布局中的列顺序

Question

我需要将 3 列的固定宽度布局转换为响应式布局，并且一直在绞尽脑汁试图理解人们对此采取的所有各种方式。列宽大约是容器 div 宽度的 22% - 56% - 22%。在智能手机上下文中显示时，我希望第 1 列和第 3 列并排显示，各占屏幕宽度的 50%，然后第 2 列(主要内容)以 100% 的宽度显示在下方。

谁能建议实现这一目标的最佳方法？我是否需要交换第 2 列和第 3 列以使它们按照我希望的方式流动？还是有另一种方法可以工作，而无需遍历和更改整个站点的标记？如果可能的话，我想使用纯 CSS 解决方案。谢谢。

Answer 1

您可以使用媒体查询和 float 来做到这一点。使用 float: left 和 float: right 您只需要正确设置您的 HTML。诀窍是将第 1 列 float 到左侧，将第 2 列和第 3 列 float 到右侧，在 html 中将第 3 列放在第 2 列之前:

FIDDLE

HTML

<div class="wrapper">
   <div class="one"></div>
   <div class="three"></div>
   <div class="two"></div>
</div>

CSS

.one{
   float: left;
   background: red;
   width: 22%;
   height:100px; 
}

.two{
   float: right;
   background: blue;
   width: 56%;
   height:100px; 
}

.three{
   float: right;
   background: green;
   width: 22%;
   height:100px; 
}

@media only screen and (max-width: 300px){

   .one{
      width: 50%
   }

   .two{
      width: 100%
   }

   .three{
      width: 50%
   }

}

更新

正如 Crispy-George 发布的那样，您可以使用 flexbox 但它的浏览器支持有限并且基本上不适用于 IE 9 及以下版本:

FLEXBOX EXAMPLE