Question

我有一个布局，对于电脑屏幕和智能手机应该看起来有点不同。

Layout 1:
|1 | 2      |
|3 | 4  |5  |
|6 | 7  |8  |

Layout 2:
|4|
|1|
|2|
|3|
|5|
|6|
|7|
|8|

您可以看到，在布局2中，div（或此示例中的文章）应移至顶部，其他div位于下方。

当我喜欢使用纯HTML + CSS，没有JS / jQuery时，如何做到这一点......！？

小提琴就在这里：https://jsfiddle.net/SchweizerSchoggi/vsn8nod7/ 绿色div是一个，它应该位于移动布局的顶部，因为它包含页面的描述文本，其他div只包含图像。

Answer 1

Flexbox可以做到这一点：

Codepen Demo

＆＃13;

* {
  box-sizing: border-box;
}
.parent {
  width: 50%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.child {
  height: 40px;
  line-height: 40px;
  background: pink;
  flex: 0 0 33.33%;
  text-align: center;
  border: 1px solid grey;
  order: 1;
}
.wider {
  flex: 0 0 66.66%;
}
@media (max-width: 600px) {
  .child {
    flex: 0 0 100%;
  }
  .topper {
    order: 0;
    background: orange;
  }
}

＆＃13;

<div class="parent">
  <div class="child">1</div>
  <div class="child wider">2</div>
  <div class="child">3</div>
  <div class="child topper">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

＆＃13;

Answer 2

我建议使用引导网格，因为这样可以更轻松地处理网格。

如果您不想使用引导程序，可以使用css中的媒体查询隐藏或显示div，具体取决于屏幕大小：

@media screen and (min-width: 400px) {
    #div4a {
        display: none;
    }
}
@media screen and (max-width: 399px) {
    #div4b {
        display: none;
    }
}

希望这有点帮助。

Answer 3

你可以在你的小提琴中使用相同的代码进行一些小改动

@media screen and (max-width: 480px) {
    #content {
        width: auto;
        position: relative;
        top: 0;
        margin: 20px 0;
    } 
    article#pic4 {
        position: absolute;
        top: 0;
        height: auto;
    }
   article#pic1{
        margin-top: 18px;

}

}

将div移至顶部以显示小屏幕

3 个答案: