如何更改缩略图顺序?

时间:2015-10-23 20:20:22

标签: html css twitter-bootstrap

请不要熟悉 Bootstrap 3 ,我开始使用此框架构建一个小型网络日志。我发现了一些困难,并希望得到一些解决方案。

我的问题是如何编码 3缩略图 ,然后在移动设备上更改订单?

<div class="col-lg-15 no-padding-left">
                            <div class="box-news">
                                <div class="block-title move no-margin">اقليم سيدي بنور</div>
                                <div class="news-items text-right">
                                    <div class="col-lg-9">
                                        <ul class="list-unstyled no-margin thumb">
                                            <li class="thumbnail md">
                                                <div class="col-xs-8">
                                                    <a href="#" class="link-item">اعطاء انطلاقة الدخول التربوي لأقسام التربية غيرالنظامية بسيدي بنور</a>
                                                </div>
                                                <div class="col-xs-7 no-padding">
                                                    <img class="img-responsive" src="http://localhost/24/public/uploads/1444912297..jpg">
                                                </div>
                                            </li>
                                            <li class="thumbnail md">
                                                <div class="col-xs-8">
                                                    <a href="#" class="link-item">استخدام سيارة للنقل المدرسي في سرقة أسمدة فلاحية من ضيعة برلماني بسيدي بنور</a>
                                                </div>
                                                <div class="col-xs-7 no-padding">
                                                    <img class="img-responsive" src="http://localhost/24/public/uploads/1444989659..jpg">
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="thumbnail lg">
                                            <img src="http://localhost/24/public/uploads/1445377322..jpg" alt="...">
                                            <div class="captison">
                                                <a href="#" class="link-item">جماعة سيدي بنور تساهم في المبادرة الملكية 'مليون محفظة'</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

我想要的结果在下面的图片中

enter image description here

1 个答案:

答案 0 :(得分:-1)

这样的事情可行:http://jsfiddle.net/WOUNDEDStevenJones/vf4h17L5/1/

<div class="row">
    <div class="col-xs-12 col-md-6">text1</div>
    <div class="col-xs-12 col-md-6">text2</div>
    <div class="col-xs-12 col-md-6">text3</div>
</div>