SEOのブートストラップで3列の並べ替え

Question

プッシュ＆プルを使用してSEO目的でブートストラップの列を並べ替えるのに役立つ必要があります。最終的な出力は下の画像のようになります。今は、デスクトップビューで左側のサイドバーとメインコンテンツを切り替えるだけです。私はdivsと浮動小数点数の束を使用してこれを行うことができましたが、私はブートストラップに試してみることにしました。ありがとう！

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4 col-1 my-col"> 
     Main Content (Middle) 
    </div> 
    <div class="col-sm-4 col-2 my-col"> 
     Left Sidebar 
    </div> 
    <div class="col-sm-4 col-3 my-col"> 
     Right Sidebar 
    </div> 
    </div> 
</div> 

CSS

.my-col{ 
line-height: 40px; 
color:white; 
text-align:center; 
font-size: 20px; 
} 

.col-1{background:red} 
.col-2{background:blue} 
.col-3{background:green} 

@media (min-width: 768px) { 
.my-col{ 
    line-height: 80px; 
} 
} 

Bootply http://www.bootply.com/slW117V1oH#

Answer 1

列の順序は、ブートストラップフレームワークのinbulit機能です。より多くの情報訪問のためにここにhere

<div class="row"> 
     <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
     <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 
    </div> 

例codepen は:)

を楽しみます