我有一个接一个的水平方式有3个div。调整大小时显示div3，div2和div1

Question

我有实现设计的问题。我有3个div：水平方式一个接一个地说div1，div2和div3。当它在小型设备上运行时，它显示div3，div2和div1。如何使用HTML，CSS。

我附上了一张图片供参考。

Answer 1

你可以使用flex。

＆＃13;

＆＃13;

* { box-sizing: border-box; margin: 0; padding: 0; }
.box {
  border: 1px solid black;
  display: flex;
}
.box > div {
  border: 1px solid red;
  width: 33%;
  height: 150px;
}

@media screen and (max-width: 400px)  {
  .box {
    flex-direction: column-reverse;
  }
  .box > div {
    width: 100%;
  }
}

＆＃13;

<div class="box">
  <div class="div1">DIV 1</div>
  <div class="div2">DIV 2</div>
  <div class="div3">DIV 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

您可以在此处查看演示：https://jsfiddle.net/75tsv8bp/

使结果窗口变小以使其正常工作......

Answer 2

您可以使用 Flexbox 和@media 查询执行此操作：

.parent {
  display: flex; /* displays flex-items (children) inline */
}

.child {
  flex-grow: 1; /* each flex-item grows and takes 1/3 of the parent's width */
  text-align: center;
  border: 1px solid;
}

@media (max-width: 568px) { /* adjust to your needs */
  .parent {flex-direction: column} /* stacks them vertically */
  .child:first-child {order: 1} /* down 1 spot */
  .child:last-child {order: -1} /* up 1 spot */
  /* "order: 0" is by default, therefore :nth-child(2) stays where it is */
  /* the order property only works with flexbox or grid */
}

<div class="parent">
  <div class="child">DIV 1</div>
  <div class="child">DIV 2</div>
  <div class="child">DIV 3</div>
</div>