¿Cómo puedo personalizar el orden de mi diseño móvil?

Los diseños estándar de HubSpot ordenan los módulos de izquierda a derecha en los dispositivos móviles. A continuación te mostramos el orden:

Para ordenar de derecha a izquierda, deberás personalizar tu plantilla y agregar CSS para ajustar el diseño. A continuación, te mostramos dos métodos para hacerlo.

Ten en cuenta que para realizar los siguientes pasos se requiere conocimiento sobre el diseño del sitio web. Si no estás cómodo con la creación de plantillas y la aplicación de CSS, deberías consultar a un diseñador.

Método 1: Fila flexible

• Navega a Contenido > Administrador de diseño.
• Crea o edita una plantilla existente.
• Agrupa las dos columnas que deseas apilar en un orden diferente.
• Haz clic en el símbolo del engranaje > Editar CSS en cada uno de los grupos de filas y columnas y agrega las siguientes clases a los grupos: “stack-row”, “main-content” y “sidebar”.
• Tu diseño debe parecerse a la captura de pantalla que aparece abajo:

• Después de agregar las nuevas clases a tus columnas, agrega el siguiente fragmento de código a tu hoja de estilo CSS:

@media screen and (max-width:768px) {

.stack-row > .row-fluid-wrapper > .row-fluid{
  display: -webkit-box;   
    display: -moz-box;      
    display: -ms-flexbox;   
    display: -webkit-flex;  
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
    .main-content{
        order: 2;
-webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2;
    
        width: 100%;
    }
    .sidebar {
        order: 1;
-webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1;
        width: 100%;
    }
}

Método 2: Voltear el módulo flotante

• Navega a Contenido > Administrador de diseño.
• Crea o selecciona la plantilla que deseas editar.
• Vuelve a ordenar las columnas para que el módulo que deseas agregar primero esté a la derecha (“barra lateral” en este ejemplo).
• Haz clic en el símbolo del engranaje > Editar CSS en cada una de las columnas y agrega la clase “sidebar” y “main-content” a las dos columnas.
• La plantilla debe parecerse al siguiente diseño. El orden de las columnas debe ser el opuesto al que deseas mostrar en el escritorio.

.sidebar {
    margin-right: 0 !important;
    float: right !important;
}
.main-content {
    margin-left: 0 !important;
}

@media (max-width: 767px) {
    .main-content {
    margin-left: 0 !important;
    }

    .main-content,
    .sidebar {
    width: 100% !important;
    float: none !important;
    }
}