调整窗口大小时重新定位html元素

Question

我连续有3个元素。当窗口的大小调整为较窄时，我希望中心元素移至顶部，而右边元素移至底部。左边的元素应该在中间。理想情况下，它们都应同时移动，因此，如果最右边的元素向下移动，则中心元素也应向上移动。

感谢您的帮助！

图片显示出预期的效果。

HTML

<div class="container">
    <span class="left">This should go in between</span>
    <span class="center">This should go ABOVE</span>
    <span class="right">This should go BELOW</span>
</div>

CSS

body {
  margin: 0px;
  padding: 0px;
}

.container {
  width: 100%;
}

.container span {
  min-width: 200px;
  width: calc(100% /3);
  width: 33.33%;
}

.left {
  float: left;
  background-color: red;
}

.center {
  text-align: center;
  float: left;
  background-color: green;
}

.right {
  float: right;
  text-align: right;
  background-color: blue;
}

@media (max-width: 600px) {
  .right {
    float: left;
    text-align: left;
  }
  .center {
    text-align: left;
  }
}

JSFiddle

Answer 1

我能够找到一些解决方案。 @media css规则在屏幕宽度缩小到特定宽度以下时进行处理。这是一个例子： Solution 1

我最终使用的解决方案是使用flexbox和“ order”属性来设置元素的顺序。然后，当屏幕足够薄时，@ media规则将更改顺序＃。

解决方案1（我没有写这个）：

function getSigned(binStr) {
  binStr = binStr.length>=8 && binStr[0]==="1"?
    binStr.padStart(32,"1"):
    binStr.padStart(32,"0");
  return parseInt(binStr,2) >> 0
}

[
"11111011", // -5
"01111011", // 123
"1111111111000" // -8
].forEach(function(binStr) {
  let signed = getSigned(binStr)
  console.log(signed);
});