Stacking using boostrap Grid System - html

Question

I am building a header using Bootstrap. I'm trying to make the desktop version spread out over the full 12 grid like so:
Then on the phone I'm wanting to having the two stack like shown below:
This is the way I've been trying to accomplish so far with bootstrap but I am not having much luck: Any feedback or suggestions appreciated!
<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

Just use floats and media queries:
.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">
GB
USD
</div>
<div class="header__right">
UK
</div>
<div class="header__message">Announce Something here</div>
</header>
live example:
https://codepen.io/anon/pen/PdXBZR