如何在小屏幕上更改 div 的顺序？

Posted 2023-03-06

【中文标题】如何在小屏幕上更改 div 的顺序？

【英文标题】：How to change order of divs on smaller screens?

【发布时间】：2015-11-17 04:11:18

【问题描述】：

当屏幕尺寸小于 480 像素时，我需要重新排序 div。

我不想使用position: absolute，因为绿色区域的高度可能会因文本数量而异。

我需要小屏幕顺序为红色、绿色、红色、绿色、红色、绿色（每个红色都在直接绿色的顶部，宽度为 100%）。

有什么想法吗？非常感谢

*, html, body 
    margin: 0;
    padding: 0;


.container 
    width: 100%;
    display: inline-block;
    box-sizing: border-box;


.full_half 
    display: inline-block;
    width: 50%;
    background-color: green;
    float: left;
    min-height: 100px;


.pic 
    background-color: red;
    height: 100px;


.text 
    box-sizing: border-box;
    padding: 20px 120px;


@media screen and (max-width: 480px) 
    .full_half 
      width: 100%;
    
    
    .text
     padding: 0 0 !important;
    

<div class="container">
    <div class="full_half pic"></div>
    <div class="full_half text">test</div>
</div>
<div class="container">
    <div class="full_half text">test</div>
    <div class="full_half pic"></div>
</div>
<div class="container">
    <div class="full_half pic"></div>
    <div class="full_half text">
        dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
        dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
        dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
    </div>
</div>

已解决：

我终于设法通过将 flexbox 应用于容器来更改顺序（仅当宽度小于 480 像素时）。

css 更改：

@media screen and (max-width: 480px) 
    .container 
      flex-direction: column;
    
    .pic 
      order: 1;
    

    .text
     order: 2;
    

http://jsfiddle.net/vquf7z7b/

【参考方案1】：

使用CSS Flexbox，您可以使用order 属性控制元素的视觉顺序，使用flex-direction 属性控制div 的x/y 方向。

以下是对代码的一些简单调整，可让您的布局正常工作：

CSS

.container 
     display: flex; /* NEW */
    /* width: 100%; */
    /* display: inline-block; */
    /* box-sizing: border-box; */


@media screen and (max-width: 480px) 
    .full_half   width: 100%; 
    .text        padding: 0 0 !important; 
    .container  flex-direction: column;          /* NEW */
    .container:nth-child(2) > .pic  order: -1;   /* NEW */

现在，当屏幕尺寸小于 480 像素时，div 会堆叠在单列中，顺序为红、绿、红、绿、红、绿。

*,
html,
body 
  margin: 0;
  padding: 0;

.container 
  display: flex;

.full_half 
  display: inline-block;
  width: 50%;
  background-color: green;
  float: left;
  min-height: 100px;

.pic 
  background-color: red;
  height: 100px;

.text 
  box-sizing: border-box;
  padding: 20px 120px;

@media screen and (max-width: 480px) 
  .full_half 
    width: 100%;
  
  .text 
    padding: 0 0 !important;
  
  .container 
    flex-direction: column;
  
  .container:nth-child(2) > .pic 
    order: -1;
  

<div class="container">
  <div class="full_half pic"></div>
  <div class="full_half text">test</div>
</div>
<div class="container">
  <div class="full_half text">test</div>
  <div class="full_half pic"></div>
</div>
<div class="container">
  <div class="full_half pic"></div>
  <div class="full_half text">
    dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
    <br />dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
    <br />dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf
    <br />
  </div>
</div>

revised fiddle

在上面的示例中，flex 容器 (.container) 的子元素排成一行，这是 flexbox (flex-direction: row) 的默认布局。

每个子元素默认为order: 0。通过在第二个.container 中为div 和.pic 类赋予-1 的order 值，它被定位在其兄弟之前（div 和.text 的值为0）。我们也可以将第一个兄弟值设为 1，从而将其移动到 div 之后和 .pic。 Learn more about the order property.

通过将 flex-direction 的值从其默认值 (row) 更改为 column，div 堆叠在一个列中。 Learn more about the flex-direction property.

---

浏览器支持： 所有主流浏览器都支持 Flexbox，except IE < 10。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。更多详情this answer。