Hey guys I have an interesting set up going on. I'm working on creating SOME mobile support for an existing site. Basically when the window is brought to a certain size or the page is opened up on a phone I want to the header to do something different. That part is easy the only thing I'm running into is this.

The basic structure of my header is this

[logo][user-stuff][right-side][1][2][3][/right-side]

These elements are all in a nice line in my header. My problem is that in mobile I need one of the elements from inside the containing div on the right to float underneath the header. So I either need it to pop outside of its container or I need its container to take up with the width of the screen. The idea is that it will end up looking like this.

[logo][user-stuff][right-side][1][2][/right-side]  

[                                3                                ]

any ideas how this can be done? If I have to use some Javascript to make this possible that's fine, but the markup needs to be minimal as per my bosses instruction. Just a little stumped on the direction.

current html

```
<div id="header">
  <div id="logo"></div>
  <div id="user-stuff"></div>

  <div id="right-side">
    <div id="1" class="right-side-section"></div>
    <div id="2" class="right-side-section"></div>
    <div id="3" class="right-side-section"></div>
  </div>
</div>

```

current css

```
#header {
  height: 48px;
  width: 100%;
}

#logo {
  display: inline-block;
  vertical-align: top;
}

#user-stuff {
  display: inline-block;
  vertical-align: top;
}

#right-side {
  display: block;
  float: right;
}

.right-side-section {
  display: inline-block;
  vertical-align: top;
}

```

Of course this is just a little bit of mockup code to give you an idea of the structure i'm working with and how everything is laid out. I just need to figure out a way to have div#3 drop underneath everything and take up the width of the screen when the screen is a certain size. Not sure how to have it breaks it's flow.