使用boostrap Grid系统堆叠

Question

我正在使用Bootstrap构建标头。 我正在尝试将台式机版本扩展到整个12个网格，如下所示：

然后在电话上，我要像下面所示的那样将两个堆栈放在一起：

到目前为止，这是我一直试图通过自举完成的方式，但是我运气不佳：任何反馈或建议都值得赞赏！

 <div class="container-fluid">
   <div class="background row">

   <div class="col-lg-1 col-xs-12">
   <p class="text-center">gb</p>
   </div>

    <div class="col-lg-1 col-xs-12">
   <p class="text-center">us</p>
   </div>

   <div class="col-lg-6 col-xs-12">
   <p class="text-center announce-something-h">ANNOUNCE SOMETHING HERE</p>
   </div>

   <div class="col-lg-4 col-xs-12">
   <p class="text-center announce-something-h">UK</p>
   </div>

Answer 1

只需使用浮点数和媒体查询：

.header{
  background-color:grey;
  overflow:hidden;
}
.header__left, .header__right, .header__message{
  padding:10px;
}
.header__left{
  float:left;
}
.header__right{
  float:right;
}
.header__message{
  text-align:center;
  background-color:red;
}

@media(max-width:767px){
  .header__message{
    clear:both;
  }
}

<header class="header">
  <div class="header__left">
    <a href="#" class="header__button">GB</a>
    <a href="" class="header__button">USD</a>
  </div>
  <div class="header__right">
    <a href="#" class="header__country-select">UK</a>
  </div>
  <div class="header__message">Announce Something here</div>
</header>

现场示例：

https://codepen.io/anon/pen/PdXBZR