Ressources » Ressources techniques » CSS » Modifier l’ordre des colonnes sur smartphones

Modifier l’ordre des colonnes sur smartphones

Appliquer la classe ‘custom_row’ aux lignes concernées puis les classes ‘first-on-mobile’, ‘second-on-mobile’, etc. aux colonnes concernées.

/* Changement d'ordre des colonnes pour Smartphone
 * Source : https://www.elegantthemes.com/blog/divi-resources/how-to-change-divis-column-stacking-order-on-mobile-devices */

@media all and (max-width: 980px) {
	/*** wrap row in a flex box ***/
	.custom_row {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap; /* Safari 6.1+ */
		flex-wrap: wrap;
	}

	/*** custom classes that will designate the order of columns in the flex box row ***/
	.first-on-mobile {
		-webkit-order: 1;
		order: 1;
	}

	.second-on-mobile {
		-webkit-order: 2;
		order: 2;
	}

	.third-on-mobile {
		-webkit-order: 3;
		order: 3;
	}

	.fourth-on-mobile {
		-webkit-order: 4;
		order: 4;
	}
	/*** add margin to last column ***/
	.custom_row:last-child .et_pb_column:last-child {
		margin-bottom: 30px;
	}
}