ブートストラップ内のcol-mdを小さくするために、これらの列を特定の順序で並べ替える必要があります。私はこの回答を試みたColumn order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3とそれはわずか3列ではなく、列がモバイルビューでスタックする必要がある特定の方法では動作しません。この方法では機能しますが、列を隠したり隠したりするのは汚いと感じます。これを達成するためのよりクリーンな方法がありますか?ブートストラップ列の並べ替えに関する助言が必要
<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>
こんにちはパムブラム私はこのソリューションを試してみましたが、3列で動作しますが、モバイルビューで表示するために必要な特定の順序で動作するようにはできませんでした。あなたがスクリーンショットを見る場合、彼らは非常に特定の順序である必要があります。 – MoxDev