Bootstrap 3 col-sm-offset-x affects to the col-md-x structure

Question

I have this code <div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs"> and bootstrap is making the offset to the col-md-12 too, I'm checking the code and I have no clue why this is happening, I think that this wasn't happening before, but I have go back a lot of steps in the code maybe to the point it was working and nothing.

If I remove the offset it works as suppose...but I don't have the offset on smaller resolutions.

This is the page where you can see the problem: Test page

Is the block where it puts "Especial 52º Aniversario"

Thanks for the help, is driving me nuts

Answer 1

The offset applies from sm all the way up to max size. To stop it, add in col-md-offset-0 to prevent the offset applying to larger sizes.

Answer 2

Bootstrap 3 = Mobile first.

Any styles you apply in the xs 'size' range will be carried through to the larger 'sizes' unless you are using the helper utilities like .visible-sm class

If you want to have a one column offset that is visible during the small range only:

    <div class="row">
      <div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs">
        <div class="col-sm-1 visible-sm"><div>
        <div>
          ...continue your content
        </div>