Vianne Yu Zhèng Vianne Yu Zhèng - 3 months ago 15
CSS Question

Reordering 3 Columns in Bootstrap for SEO

I need help reordering columns in Bootstrap for SEO purposes using push and pull. The final output would be like the image below. Right now I only need to switch the Left Sidebar and Main Content on desktop view. I managed to do this using a bunch of divs and floats but I decided to give bootstrap a try. Thanks!

enter image description here

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

Column ordering is the inbulit feature of bootstrap framework. For more information visit 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>

example here codepen enjoy :)

Comments