Div使用CSS重新排序

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

在桌面上,布局将是：

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

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

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

解决方法

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

我用一个简短的例子做了一个 pen.我还推荐CSS Tricks Complete Guide to Flexbox,它谈论如何使用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 on .container,我可以设置内容是应该显示在行还是列中,应该包裹一行,在元素之间或周围有空格等.我已经将主要规则设置为一个包裹行使用flex-flow(这是两个其他flex属性的简写,包括我后面需要的flex-direction),以及元素之间的空间.

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

然后我使用媒体查询,因此当浏览器比指定的宽度窄时,flex-direction从一行变为另一列

@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
  }
}

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

Div使用CSS重新排序

解决方法

相关文章