在引导搜索引擎优化重新排序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列

回答

相关问题