Question

我有2列左右。当窗口缩小时，我希望右列显示在左列上方。

现在当窗口缩小时，右边会在左下方弹出。

如何更改窗口，以便在窗口缩小时右列移动到左列的顶部？

这里是我的代码的小提琴：http://jsfiddle.net/1m6n2dz8/1/

.descright {
float: right;
width: 40%;
}
.descleft {
float:left;
width:60%;
}
.group {
margin:0 6%;
}

@media screen and (max-width: 480px) {
.descleft, .descright {
float: none;
width: auto;
}
}

如果有人能指出我正确的方向，我真的很感激！

Answer 1

简单的方法就是将正确的列放在HTML源顺序中。在不久的将来，我们将采用网格布局，在这方面提供更大的灵活性，但它们还没有准备好。

Answer 2

要获得该布局，您可能希望重新排序标记，并添加一些left属性以交换较大宽度的列：

＆＃13;

.descright {
  float: right;
  width: 40%;
  left: -60%;
}
.descleft {
  float: left;
  width: 60%;
  left: 40%;
}
.group {
  margin: 0 6%;
}
@media screen and (max-width: 480px) {
  .descleft,
  .descright {
    float: none;
    width: auto;
  }
}

＆＃13;

<div class="group">
  <div class="descright">
    Right
  </div>
  <div class="descleft">
    Left
  </div>
</div>

＆＃13;

Answer 3

只需交换HTML列的顺序即可。

＆＃13;

.descright {
  float: right;
  width: 40%;
}
.descleft {
  float: left;
  width: 60%;
}
.group {
  margin: 0 6%;
}
@media screen and (max-width: 480px) {
  .descleft,
  .descright {
    float: none;
    width: auto;
  }
}

＆＃13;

<div class="group">
  <div class="descright">Right</div>
  <div class="descleft">Left</div>
</div>

＆＃13;

窗口缩小时更改列的顺序

3 个答案: