0

Bootstrap 3 を使用してユーザー プロファイルをレスポンシブにしようとしています。プロファイルの非常に単純化された例は次のとおりです: http://jsfiddle.net/RRfSW/5/

デスクトップでは、最も関連性の高い情報が含まれているため、ボックス 1 と 2 が一番上にあることが重要です。モバイル デバイスでは、ボックス 2 はボックス 1 のすぐ下にある必要があります - 同じ理由です。しかし、例のサイズを変更するとわかるように、ボックス 3 の下になります。

もちろん、ボックス 1 と 2 を div[class=row] に配置することもできますが、ご覧のとおり、ボックスは同じ高さではなく、デスクトップで多くのスペースを浪費します。

どうすればこの問題を処理できますか?

<div class="row">
<div id="leftBar" class="col-md-7">

    <div id="mainProfile" class="row">
        <div class="col-md-12">
            1
        </div>
    </div>

    <div id="details" class="row">
        <div class="col-md-6">  
            3                
        </div>

        <div class="col-md-6">                    
        </div>
    </div>

</div>


<div id="rightBar" class="col-md-5">
    <div id="contact" class="row">
        <div class="col-md-6">   
            2                
        </div>
    </div>
    <div id="other" class="row">
        <div class="col-md-6">     
            4               
        </div>
    </div>
</div>

4

2 に答える 2

0

私にとって、あなたの質問はモバイルの div の順序と同じように見えるので、重複にも投票します。

あなたの場合、http://bootply.com/82040を参照してください

CSS

#mainProfile {
    background-color: #ccaaaa;
    height:200px;
}

#details {
    background-color: #aaccaa;
    height:180px;
}

#contact {
    background-color: #cc66ff;
    height:300px;
}

#other {
    background-color: #aaaacc;
    height:180px;
}    

.floatright{float:right;}
@media (max-width: 992px)
{    
    .floatright{float:none;}
}

html

<div class="row">
    <div id="leftBar" class="col-md-7">

        <div id="mainProfile" class="row">
            <div class="col-md-12">
1               main profile
            </div>
        </div>
    </div>    
    <div id="rightBar2" class="col-md-5 floatright">
        <div id="contact" class="row">
            <div class="col-md-6">   2                
            </div>
        </div>
    </div>

<div id="leftBar" class="col-md-7">
        <div id="details" class="row">
            <div class="col-md-6"> 3 details           
            </div>

            <div class="col-md-6">    ???                
            </div>
        </div>

    </div>


<div id="rightBar" class="col-md-5">
        <div id="other" class="row">
            <div class="col-md-6">     4               
            </div>
        </div>
    </div>
</div>
于 2013-09-19T20:52:15.477 に答える