1

ブートストラップ内のcol-mdを小さくするために、これらの列を特定の順序で並べ替える必要があります。私はこの回答を試みたColumn order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3とそれはわずか3列ではなく、列がモバイルビューでスタックする必要がある特定の方法では動作しません。この方法では機能しますが、列を隠したり隠したりするのは汚いと感じます。これを達成するためのよりクリーンな方法がありますか?ブートストラップ列の並べ替えに関する助言が必要

デスクトップビューここにここに enter image description here

<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Document</title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
</head> 
<body> 
    <div class="container"> 
    <div class="row"> 
    <div class="col-md-12 visible-md visible-lg"> 
     <div class="col-md-4"><div class="well">1</div></div> 
     <div class="col-md-4"><div class="well">2</div></div> 
     <div class="col-md-4"><div class="well">ad1</div></div> 
     <div class="col-md-4"><div class="well">3</div></div> 
     <div class="col-md-4"><div class="well">4</div></div> 
     <div class="col-md-4"><div class="well">ad2</div></div> 
     <div class="col-md-4 col-md-push-8"><div class="well">ad3</div></div> 
    </div> 
    <!--col-md-12 visible-md visible-lg --> 

    <div class="col-xs-12 visible-xs visible-sm"> 
     <div class="col-xs-12"><div class="well">ad1</div></div> 
     <div class="col-xs-12"><div class="well">1</div></div> 
     <div class="col-xs-12"><div class="well">ad2</div></div> 
     <div class="col-xs-12"><div class="well">2</div></div> 
     <div class="col-xs-12"><div class="well">3</div></div> 
     <div class="col-xs-12"><div class="well">ad3</div></div> 
     <div class="col-xs-12"><div class="well">4</div></div> 
    </div> 
    <!-- col-xs-12 visible-xs visible-sm --> 

    </div> 
    <!-- row --> 
</div> 
<!-- container --> 
</body> 
</html> 

Codepen here

+0

こんにちはパムブラム私はこのソリューションを試してみましたが、3列で動作しますが、モバイルビューで表示するために必要な特定の順序で動作するようにはできませんでした。あなたがスクリーンショットを見る場合、彼らは非常に特定の順序である必要があります。 – MoxDev

答えて

1

enter image description here

モバイルビューを確認してください:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row hidden-xs hidden-sm"> 
 
    <div class="col-md-8"><div class="well">728x90 Ad</div></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-8"><div class="well">Title</div></div> 
 
    <div class="col-md-4"><div class="well">ad1</div></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-4"><div class="well">1</div></div> 
 
    <div class="col-md-4 col-md-push-4"><div class="well">ad2</div></div> 
 
    <div class="col-md-4 col-md-pull-4"><div class="well">2</div></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-md-4"><div class="well">3</div></div> 
 
    <div class="col-md-4 col-md-push-4"><div class="well">ad3</div></div> 
 
    <div class="col-md-4 col-md-pull-4"><div class="well">4</div></div> 
 
    </div> 
 

 
</div> <!-- container -->

+0

素晴らしい私の友人はありがとう。私は前にそれに似た何かを試みたが、ちょうどそれが正しいように思えなかった。 – MoxDev

関連する問題