响应标题问题

Question

我有这段代码，我希望css代码只有max-width: 780px，.second只有一行，因为它是徽标，.first和.third在下面的行。我不知道怎么做。

通常，这些元素在一行中排序，宽度比780px宽。正常订单：first, second, third 我想要的订单max-width: 780px：

.................第二..............

........第一........ | .......第三......

<header>
      <div class="first">
      </div>
      <div class="second">
      </div>
      <div class="third">
      </div>
</header>

header {
  background: #FFF;
  width: 100%;
  height: 160px;
}
.SearchBar {
  width: 30%;
  height: 130px;
  display: inline-block;
  float: left;
  text-align: center;
}
.SearchBar:before {
  /* create a full-height inline block pseudo=element */
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  /* vertical alignment of the inline element */
  height: 100%;
}
.SearchBar>p {
  padding-right: 0;
  padding-left: 0;
  display: inline-block;
}
.SearchBar>p>input {
  background: url("../images/search_icon.png") no-repeat scroll 0 0 transparent;
  background-position: 90% 50%;
  width: 230px;
  height: 50px;
  border: 1px solid #c8c8c8;
  font-family: FuturaLight;
  text-indent: 20px;
  font-size: 18px;
}
.SearchBar>p>input:enabled {
  cursor: text;
}
.logo {
  width: 40%;
  height: 130px;
  display: inline-block;
  margin: auto;
  text-align: center;
}
.logo:before {
  /* create a full-height inline block pseudo=element */
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  /* vertical alignment of the inline element */
  height: 100%;
}
.logo a {
  display: inline-block;
  vertical-align: middle;
  /* vertical alignment of the inline element */
}
.shoppingcar {
  width: 30%;
  height: 130px;
  display: inline-block;
  float: right;
  text-align: center;
}
.shoppingcar:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.cartletter {
  padding-right: 0;
  padding-left: 0;
  display: inline-block;
  font-family: FuturaLight;
}

<header>
  <div class="subheader"></div>
  <div class="SearchBar">
    <a> FIRST</a>
  </div>
  <div class="logo">
    <a> SECOND</a>
  </div>
  <div class="shoppingcar">
    <p class="cartletter">
      <a> THIRD</a>
    </p>
  </div>
</header>

Answer 1

嗯，好吧，因为没有css代码和jsfiddle，我假设这可以做到这一点？尝试一下，让我知道吗？

@media all and (max-width: 780px) {
    .second  { 
      display:inline-block;
     }
    .first {
     display:inline;
     float:left;
     }
    .third {
     display:inline;
     float:right;
     }
}