How to move columns with bootstrap

I have the following code and I also sent a picture. My issue is I cant seem to get these dropdowns closer to the labels.

Here is the code

 <asp:UpdatePanel runat="server" ID="pnlItems" >
                            <ContentTemplate>
                       <div class="row">
                            <div class="col-md-2 col-xs-12">
                                <asp:Label runat="server" Text="Select Service Type:" CssClass="control-label"></asp:Label>
                                
                            </div>
                           <div class="col-md-2  col-md-pull-2 col-xs-10 ">
                               <asp:DropDownList runat="server" ID="ddType" CssClass="form-control dropdown" AutoPostBack="True"></asp:DropDownList>
                           </div>
                          
                          

                            <div class="col-md-2  col-xs-12 ">
                                <asp:Label runat="server" Text="Select Service Item" CssClass="control-label"></asp:Label>
                                
                            </div>
                                  <div class="col-md-2 col-xs-10 ">
                                      <asp:DropDownList runat="server" ID="ddItem" CssClass=" form-control dropdown"  AutoPostBack="True"></asp:DropDownList>
                                  </div>  
                                           
                            <div class="col-md-2 col-xs-13">
                                <asp:Label runat="server" Text="Select Service Problem" CssClass="control-label"></asp:Label>
                               
                            </div>

                                <div class="col-md-2 col-xs-10 ">
                                     <asp:DropDownList runat="server" ID="ddProblem"  CssClass="dropdown form-control" ></asp:DropDownList>
                                </div>   [embed=file 930351]

Open in new window

You can see the spacing in the call priority but that is because they are both in the same column.. I need these in separate columns so each fills a row when seen on a phone.

thanks
Dropdown-Question.png

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 4

Jessica WhitleySoftware DeveloperCommented: 2015-08-19

One problem I can tell you have is a col is never larger than 12 - you have automatic overfill if a col is 13 whether xs or md.
Add a for="" to each label and the id of each of the controls they belong to may begin to solve the issue.
Instead of doing a pull on the select you could to an offset on the labels. Do a col-md-2-offset-1 or 2 and it will push the labels right.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

mgmhicksAuthor Commented: 2015-08-27

That ended up working. Thank you

How to move columns with bootstrap

Who is Participating?