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

Question

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

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

Answer 1

您可以使用媒体查询和浮动来做到这一点。使用 float: left 和 float: right 您只需要正确设置 HTML 即可。诀窍是将第 1 列向左浮动，将第 2 列和第 3 列向右浮动，在 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

Answer 2

如果您必须在列上保持严格的顺序，例如：

<div class='box box-1'>Small box</div>
<div class='box box-2'>Yeah, I'm the big box</div>
<div class='box box-3'>Even Smaller box</div>

您可以使用 flexbox 在您想要的屏幕分辨率上更改这些框的 order，但是我相信它不支持低于 IE9 的版本，但如果您不必支持旧版本浏览器，查看 demo here。

标记：

<div class='container'>
    <div class='box box-1'>Small box</div>
    <div class='box box-2'>Yeah, I'm the big box</div>
    <div class='box box-3'>Even Smaller box</div>
</div>

还有 css 东西：

.container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;  
}
.box{
    min-height: 200px;
    font-size: 18px;
}
.box-1{
    width: 25%;
    background: red;
}
.box-2{
    width: 60%;
    background: teal;
}
.box-3{
    width: 15%;
    background: cyan;
}

@media all and (max-width: 768px){
    .box-1{
        -webkit-order: 1;
        -ms-order: 1;     
        order: 1;
        width: 50%;
    }  
    .box-3{
        -webkit-order: 2;
        -ms-order: 2;     
        order: 2;
        width: 50%;
    } 
    .box-2{
        -webkit-order: 3;
        -ms-order: 3;     
        order: 3;
        width: 100%;
    }
}

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

Changing the order of columns in a responsive 3-column layout

html

css

responsive-design