Make ASP.Net DataList Responsive using Bootstrap

Hello,

My DataList Control is not display as expected in mobile view.

But when in mobile, I want a situation where the image that will display will be single so that I can scroll down to see other images

HTML

<div class="col-md-9" style="width: 100%; margin: 0 auto; padding: 10px;">
    <asp:DataList ID="dlProductList" runat="server" RepeatColumns="3">
        <HeaderTemplate>
        </HeaderTemplate>
        <ItemTemplate>
            <div class="row" style="width: 100%;margin: 0 auto; border: 1px solid #eeeeee; border-radius: 10px;">
                <div class="col-sm-6 col-md-12">
                    <div class="col-md-12">
                        <div class="thumbnail">
                            <a href="#">
                                <asp:ImageButton ID="Imagebooks" ImageUrl='<%#Eval("Url") %>' OnClick="OnMoreDetails"
                                    Height="180px" Width="250px" CommandArgument='<%#Eval("Id") %>' runat="server" /></a>
                            <div class="caption">
                                <h3>
                                    <span>
                                        <%#Eval("Name")%>
                                    </span>
                                </h3>
                                <p>
                                    Small Description
                                </p>
                                <p>
                                    <asp:Button ID="btnView" Text="More Details...." class="btn btn-primary" CommandName='<% #Eval("Id") %>'
                                        runat="server" />
                                </p>
                            </div>
                        </div>
                        <br />
                    </div>
                </div>
            </div>
        </ItemTemplate>
        <FooterTemplate>
        </FooterTemplate>
    </asp:DataList>
</div>