Div使用CSS重新排序

Question

有没有人知道如何实现以下任何示例或教程:

在桌面上,布局将是:

在移动设备上,布局将更改为:

正如您所看到的,我希望方框2和方框3在移动设备上重新排序和交换位置

有人有任何提示或建议吗？

Answer 1

根据您需要支持的浏览器,您可以使用flex-box.使用媒体查询屏幕大小,然后您可以设置order第二个和第三个框以切换到某个屏幕宽度以下.

我用一个简短的例子做了一支笔.我还推荐了Flexbox的CSS Tricks Complete Guide,它讨论了如何flex更好地使用它.

编辑:

基本原则是将父元素(例如,容器)设置为display: flex ; 这会生成弹性框,并允许您为子项设置不同的参数.

使用以下HTML:

<div class="container">
  <div class="box first">
    Box 1
  </div>
  <div class="box second">
    Box 2
  </div>
  <div class="box third">
    Box 3
  </div>
</div>

如果我display:flex开启.container,我可以设置内容是应该显示在行还是列中,应该包裹一行,在元素之间或周围有空间等.我已经将主要规则设置为使用flex的包装行-flow(这是两个其他flex属性的简写,包括flex-direction我后面需要的),元素之间有空格.

.container{
  display:flex;
  flex-flow: row wrap;
  justify-content:space-between;
}

然后我使用媒体查询,以便当浏览器比规定宽度窄时,flex-direction会从改变row到column

@media screen and (max-width:600px){
  .container {
    flex-direction:column
  }
 }

然后,在相同的媒体查询中,我需要告诉我想要重新排序它们应该在哪个顺序的元素:

@media screen and (max-width:600px){
  .container {
    flex-direction:column
  }
  .second{
    order: 3;
  }
  .third{
    order: 2
  }
}

有时我注意到order需要为所有元素定义,因此您可能需要为第一个块设置它并将其保留为order: 1.从上面链接的笔来看,这里似乎并不是这样,但在其他项目中需要注意的事情.