Responsive jQuery Mobile header buttons

I've got the following problem with my header section in my jquery mobile application:

Here is the code:

<div data-role="footer" class="ui-bar">
            <a href="#searchpage" data-role="button" data-icon="search" style="border-right:1px solid #0E6251;">Search</a>
            <a href="#sellbookpage" data-role="button" id="ContactSellButton" data-icon="dollar" style="border-right:1px solid #0E6251;">Sell</a>
            <a href="#" data-role="button" data-icon="email">Contact Us</a>

            <div id='ContactUsProfileButtons' class='ui-btn-right' style="display: flex;">  
                <a data-icon='home' href="#profilepage"  data-role='button' style="border-right:1px solid #0E6251;">Profile</a>
                <a data-icon='forward' onclick='LogOut()' data-role='button'>Log Out</a>
            </div>  

Ideally I would like the buttons to condense into a drop down menu as seen with twitter bootstrap. But I can't seem to get this right. Does jquery mobile a) not cater for this? b) if not how can I fix the problem?

Note for the code I followed this link. I'm aware I'm using a footer class here but I simply did this to have the buttons be formatted next to each other and have the freedom of moving them around with out having to worry about tags.

        </div>