class - div - Bootstrap 3 col-sm-offset-x afecta a la estructura col-md-x

col-xs bootstrap 4

Question

Tengo este código <div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs"> y bootstrap está haciendo el desplazamiento al col-md-12 también, estoy verificando el código y no tengo idea de por qué sucede esto, creo que esto no estaba sucediendo antes, pero he retrocedido un montón de pasos en el código, tal vez hasta el punto en que funcionaba y nada.

Si elimino el desplazamiento, funciona como supongo ... pero no tengo el desplazamiento en resoluciones más pequeñas.

Esta es la página donde puede ver el problema: Página de prueba

Es el bloque donde pone "Especial 52º Aniversario"

Gracias por la ayuda, me está volviendo loco

Answer 1

Bootstrap 3 = Móvil primero.

Cualquier estilo que aplique en el rango xs ''size'' se transferirá a los ''tamaños'' más grandes a menos que esté usando las utilidades de ayuda como la clase .visible-sm

Si desea tener un desplazamiento de una columna que sea visible solo durante el rango pequeño:

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

Answer 2

La compensación se aplica desde sm hasta el tamaño máximo. Para detenerlo, agregue col-md-offset-0 para evitar que el desplazamiento se aplique a tamaños más grandes.