seo Question posted in
Some basic information to get you started with this can be found here.

Bootstrap positioning col-xs with div order bound for seo reasons

I’m using Bootstrap 3.0 and I have this situation:

  <div class="row">
    <div class="col-md-8 col-xs-12">text</div>
    <div class="col-md-4 col-xs-12">photo</div>
  </div>

Desktop 

---------------- ---------
|   text        | photo   |
---------------- ---------

Mobile

  -------------------------
 |   text                 |
  -------------------------
 |   photo                |
  -------------------------

On mobile I need to have photo before text.

-------------------------
|   photo               |
-------------------------
|   text                |
-------------------------

I tried using pull/push for col-sx but without success.

I know that Bootstrap is “mobile-first” and a solution could be to get them in the order I want on the sx first and then push/pull them in to position on the desktop, but for SEO reasons I need to have text code before photo.

Is it possible ?
Thank’s

Tags:

3

Answers


  1. 0

    I don’t think so this would impact SEO. SEO has nothing to do with div layouts. SEO impacts with headers, images, links, and paragraphs, etc.

    However, to solve your layout, you can do like this:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-8 col-sm-push-8 col-xs-12">text</div>
  <!--first push-->
  <div class="col-md-4 col-sm-pull-8 col-xs-12">photo</div>
  <!--then pull-->
</div>
    Login or Signup to reply.
  2. 0

    Approach it the other way around – mobile first…

    So put your photo before text, and use push/pull on larger screens.

    You cannot use push/pull on xs cols.

    BTW, you need xs NOT sx! 🙂

    <div class="row">
    <div class="col-md-4 col-md-push-8 col-xs-12">photo</div>
    <div class="col-md-8 col-md-pull-4 col-xs-12">text</div>
</div>
    Login or Signup to reply.
  3. 0

    You should try flexbox.

    If you have just these two items in the .row element then it is relatively simple

     /* Of course, use your xs max-width */
 @media screen and (max-width: 768px) {
   .class-of-this-row {
     display: flex;
     flex-direction: column-reverse;
   }
 }
    <div class="row class-of-this-row">
  <div class="col-sm-8 col-xs-12">text</div>
  <div class="col-sm-4 col-xs-12">photo</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search