A bit complex bootstrap responsive col-layout
<p><strong>I have three elements inside a box :</strong></p>

<p>1) A dropdown (left)</p>

<p>2) A searchfield and a button (right after the dropdown)</p>

<p>3) A "New article" button (to the right)</p>

<p>On desktop, everything looks like it should (Everything is nicely aligned next to eachother).. </p>

<p><strong>but on mobile (col-sm and lower) i'm trying to accomplish the following :</strong> </p>

<p>1) dropdown (left)</p>

<p>2) searchfield and button (left underneath the dropdown)</p>

<p>3) "New article" button to the right-top</p>

<p>Have googled around for pretty long now, and haven't been able to find a solution.</p>

<p>Here's my code so far, which.. doesn't work : </p>

<pre><code>&lt;div class="input-group"&gt;
    &lt;div class="col-sm-10"&gt;
        &lt;div class="col-md-12"&gt;
            &lt;div class="col-md-12 col-sm-6 col-xs-6"&gt;
                &lt;div style="float: left; margin-top: 5px"&gt;
                    &lt;p style="color: #666"&gt;Nyheter for: &amp;nbsp;&lt;/p&gt;
                &lt;/div&gt;
                &lt;div style="float: left"&gt;
                    &lt;asp:DropDownList runat="server" CssClass="form-control smalltext" Style="height: 30px;" ID="ddlNewsFilter" ItemType="Servicelayer.ClubClassTeam" DataValueField="Id" DataTextField="Name" AutoPostBack="True" AppendDataBoundItems="True"&gt;
                        &lt;asp:ListItem Text="- Velg lag -" Value="0" /&gt;
                    &lt;/asp:DropDownList&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-12 col-sm-6 col-xs-6"&gt;
                &lt;div style="float: left"&gt;
                    &lt;asp:TextBox runat="server" ID="txtSearch" CssClass="pagemenu-item" placeholder="Søk" /&gt;
                &lt;/div&gt;
                &lt;div style="float: left"&gt;
                    &amp;nbsp;&lt;asp:LinkButton runat="server" ID="btnClearFilter" CssClass="btn btn-default btn-sm" OnClick="btnClearFilter_OnClick"&gt;
                &lt;i class="dark fa fa-close"&gt;&lt;/i&gt;
                    &lt;/asp:LinkButton&gt;
                &lt;/div&gt;
                &lt;div style="float: left"&gt;
                    &lt;asp:Button runat="server" CssClass="item" ID="lnkSearch" Text="Søk" /&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-2"&gt;
        &lt;div style="float: right"&gt;
            &lt;asp:LinkButton runat="server" CssClass="item" ID="lnkNewArticle" Text="Ny artikkel" OnClick="lnkNewArticle_Click" Visible="False" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Can anyone correct this for me so i can get my so long desired result ? </p>