Rows a 2 columnas en mobile Theme X

En ponceelrelajado, hemos tenido la oportunidad de trabajar con un tema premium llamado Theme X listado como uno de los mejores temas wordpress desde 2015, que facilita muchísimo las tareas a la hora de desarrollar y maquetar sitios wordpress, pero, como todo en la vida, nada es perfecto, y eventualmente terminaras haciendo uso de código y herramientas de la vieja escuela, es por eso que en está oportunidad te mostramos como dividir rows a 2 columnas en mobile Theme X.

Aquellos a que tienen la oportunidad de usarlo, se han dado cuenta de que aunque el cornerstone es muy bueno a la hora de maquetar, se queda corto con algunas funcionalidades, de modo que tenemos que usar un poco de css para conseguir lo que estamos buscando, en este caso, mostrar 2 columnas en mobile.

Si por ejemplo tienes un row con 4 columas en desktop y quieres que en mobile se vean 2 basta con hacer lo siguiente

.x-visibility.x-visible-phone {
	margin: 0 auto;
}
@media (max-width: 767px) {
	.x-column.x-1-2 {
		float: left;
		width: 50%;
	}
}

y ya con esto podremos mostrar 2 columnas en version mobile.

Como bonus te dejemos las clases responsives del tema registradas por nuestro amigo y antiguo compañero de trabajo todoconk:

@media (min-width: 1200px) {
	.x-hide-xl {
		display: none !important
	}
}
@media (min-width: 980px) and (max-width: 1199px) {
	.x-hide-lg {
		display: none !important
	}
}
@media (min-width: 768px) and (max-width: 979px) {
	.x-hide-md {
		display: none !important
	}
}
@media (min-width: 481px) and (max-width: 767px) {
	.x-hide-sm {
		display: none !important
	}
}
@media (max-width: 480px) {
	.x-hide-xs {
		display: none !important
	}
}
.x-visible-phone {
	display: none !important
}
.x-visible-tablet {
	display: none !important
}
.x-visible-desktop {
	display: inherit !important
}
span.x-visible-desktop {
	display: inline !important
}
.x-hidden-desktop {
	display: none !important
}
@media (min-width: 768px) and (max-width: 979px) {
	.x-visible-tablet {
		display: inherit !important
	}
	span.x-visible-tablet {
		display: inline !important
	}
	.x-hidden-tablet {
		display: none !important
	}
	.x-hidden-desktop {
		display: inherit !important
	}
	span.x-hidden-desktop {
		display: inline !important
	}
	.x-visible-desktop {
		display: none !important
	}
}
@media (max-width: 767px) {
	.x-visible-phone {
		display: inherit !important
	}
	span.x-visible-phone {
		display: inline !important
	}
	.x-hidden-phone {
		display: none !important
	}
	.x-hidden-desktop {
		display: inherit !important
	}
	span.x-hidden-desktop {
		display: inline !important
	}
	.x-visible-desktop {
		display: none !important
	}
}