bootstrap栅格修改缩略图位置

【修改错误不会修改】我使用bootstrap栅格系统修改响应式修改缩略图位置，如下图想要将狗头1-4修改为狗头4-1，在lg，md的修改都成功，sm第一列的修改成功，但第二列的修改就会使页面崩溃，目前找不到原因，还请指教

<body>
    <div class="container">
        <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>...</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
        <div class="row">
            <!-- 左拉右推 -->
            <!-- 修改第一列，lg右移9格，md右移8格，sm右移6格 -->
            <div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6">
                <div class="thumbnail">
                    <a href="#" class="thumbnail">
                        <img src="picture\u=213247761,1728183188&fm=26&gp=0.jpg" alt="...">
                    </a>
                    <div class="caption">
                        <h3>狗头1</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <!-- 修改第二列，lg右移3格，md右移0格，sm右移6格 -->
            <div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6">
                <div class="thumbnail">
                    <a href="#" class="thumbnail">
                        <img src="picture\u=213247761,1728183188&fm=26&gp=0.jpg" alt="...">
                    </a>
                    <div class="caption">
                        <h3>狗头2</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <!-- 修改第三列，lg左移3格，md左移8格，sm左移6格 ，sm目的是与狗头4交换位置-->
            <div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6">
                <div class="thumbnail">
                    <a href="#" class="thumbnail">
                        <img src="picture\u=213247761,1728183188&fm=26&gp=0.jpg" alt="...">
                    </a>
                    <div class="caption">
                        <h3>狗头3</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
            <!-- 修改第四列，lg左移9格，md左移0格，sm左移6格 ，sm目的是与狗头3交换位置-->
            <div class="col-lg-3 col-lg-pull-9 col-md-4 col-md-pull-0 col-sm-6">
                <div class="thumbnail">
                    <a href="#" class="thumbnail">
                        <img src="picture\u=213247761,1728183188&fm=26&gp=0.jpg" alt="...">
                    </a>
                    <div class="caption">
                        <h3>狗头4</h3>
                        <p>...</p>
                        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#"
                                class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>

img

img

img

img
预期不会崩溃的页面

img