为 SEO 重新排序 Bootstrap 中的 3 列答案

【问题标题】：Reordering 3 Columns in Bootstrap for SEO为 SEO 重新排序 Bootstrap 中的 3 列
【发布时间】：2016-08-22 03:52:45
【问题描述】：

我需要帮助重新排序 Bootstrap 中的列，以使用推和拉来实现 SEO 目的。最终输出将如下图所示。现在我只需要在桌面视图上切换左侧边栏和主要内容。我设法使用一堆 div 和 float 来做到这一点，但我决定尝试 bootstrap。谢谢！

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;
}
}

引导http://www.bootply.com/slW117V1oH#

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

列排序是引导框架的固有特性。欲了解更多信息，请访问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 享受:)

【讨论】：