Question

我有两个div在更宽的屏幕上并排（比如1000 px）

方框1是方框2的左侧

当我将屏幕尺寸更改为330px时，我想要Box 2 ABOVE Box 1。

我在BOX 1 ABOVE Box 2中没有问题，但没有相反的情况。

我希望这可以用css完成 - 我可以用javascript来实现。

Answer 1

正如您所说的响应能力，@media查询开始发挥作用。我不关心旧IE版本，因此我使用FlexBox作为您的解决方案。我们可以在flexbox中进行反转和订单。

<强>段

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flex-item {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

div {border: 1px solid #ccc; max-width: 100px;}
div div {width: 50px; height: 50px; line-height: 50px; text-align: center;}

@media (max-width: 330px) {
  .flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .flex-item {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

旧版浏览器的另一个选项，只是以巧妙的方式使用float。

带浮动的代码段

div {border: 1px solid #ccc; max-width: 104px;}
div div {width: 50px; height: 50px; line-height: 50px; text-align: center;}

div {overflow: hidden;}
div div {float: left;}
div div:first-child {float: right;}

@media (max-width: 330px) {
  div div {float: none;}
}

<div class="container">
  <div class="item">2</div>
  <div class="item">1</div>
</div>

Answer 2

您可以使用媒体查询修改特定屏幕宽度下的CSS规则：

div {
  width: 130px;
  background-color: #7A9;
  margin: 10px;
  display: inline-block;
}

@media screen and (min-width: 331px) {
  #box1 {
    float: left;
  }
  #box2 {
    float: right;
  }
}

<div id="box2">BOX 2</div>
<div id="box1">BOX 1</div>

响应地反向堆叠Div

2 个答案: