html - CSS:改变元素的位置

Question

在我的网页中，标题部分有这样的代码:

<header>
    <span>Test</span>
    <span>Test</span>
    <img src="http://serwer1417769.home.pl/foty/cyfrowe/LM358N/2.JPG" />
    <span>Test</span>
    <span>Test</span>
</header>

在比桌面小的屏幕上，我想让这个 img 显示在单独的一行中，这些 span 在一行中显示在下面。我不知道该怎么做。我试过使用 float 属性，现在我正在尝试使用位置属性，但我只设法使图像居中； span 元素显示在一行中，但不显示在下面。

header {
  position: relative;
  width: 60%;
  letter-spacing: 8px;
}
header span {
  padding-left: 2%;
}
header img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 50%;
  right: 0;
}

这是我尝试这样做的代码笔:http://codepen.io/anon/pen/ZGgBeM

Answer 1

目前还不完全清楚这在桌面上应该如何显示，但 flexbox 可以做到这一点。

* {
  box-sizing: border-box;
}
header {
  width: 50%;
  border: 1px solid grey;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
span {
  flex: 0 0 50%;
  background: lightblue;
  border: 1px solid grey;
}
img {
  display: block;
  max-width: 100%;
  margin: auto;
}
.wrap {
  flex-basis: 100%;
}
@media (max-width: 780px) {
  span {
    flex-basis: 25%;
    order: 2
  }
}

<header>
  <span>Test</span>
  <span>Test</span>
  <div class="wrap">
    <img src="http://serwer1417769.home.pl/foty/cyfrowe/LM358N/2.JPG" />
  </div>
  <span>Test</span>
  <span>Test</span>
</header>

Codepen Demo