在引導搜索引擎優化重新排序3列

我需要幫助重新排序Bootstrap中的列使用推和拉的SEO目的。最終輸出將如下圖所示。現在我只需要在桌面視圖中切換左邊欄和主內容。我設法使用一堆div和浮動來做到這一點，但我決定給bootstrap一個嘗試。謝謝！在引導搜索引擎優化重新排序3列

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#

來源

2016-08-21 WebDev

列排序是引導框架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 享受:)

來源

2016-08-21 19:52:45

在引導搜索引擎優化重新排序3列

回答

相關問題