Bootstrap响应div顺序

时间:2018-08-25 09:00:05

标签: html twitter-bootstrap-3

我有3格。在PC中,我要显示相同的图片。但是当做出回应时,我想按顺序1-> 2-> 3显示。请问我该怎么做

<div class="row">
    <div class="col-md-6 col-sm-12">
        <div class="portlet yellow-crusta box">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-cogs"></i>1
                </div>
            </div>
            <div class="portlet-body">

            </div>
        </div>
        <div class="portlet yellow-crusta box">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-cogs"></i>3
                </div>
            </div>
            <div class="portlet-body">

            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="portlet blue-hoki box">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-cogs"></i>2</div>
            </div>
            <div class="portlet-body">

            </div>
        </div>
    </div>
</div>

enter image description here

1 个答案:

答案 0 :(得分:1)

正确使用引导程序类。

<div class="row">
    <div class="col-md-6 col-sm-12">
        <div class="portlet yellow-crusta box">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-cogs"></i>1
                </div>
            </div>
            <div class="portlet-body">

            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="portlet blue-hoki box">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-cogs"></i>2</div>
            </div>
            <div class="portlet-body">

            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <div class="portlet yellow-crusta box">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-cogs"></i>3
                </div>
            </div>
            <div class="portlet-body">

            </div>
        </div>
     </div>
</div>