Cuando miro muchos sistemas y marcos de cuadrícula CSS, generalmente tienen una configuración estándar de columna y fila con anchos porcentuales. Algo como esto, por ejemplo:

columna de cuadrícula estándar:

.col-10 {
  width: 83.33333%;
  width: calc(100% / 12 * 10);
  width: -webkit-calc(100% / 12 * 10);
  width: -moz-calc(100% / 12 * 10); }

Sin embargo, además de esto, a menudo veo otras clases como.push o.pull. Por ejemplo así:

Clases push / pull:

.push-10 {
  left: 83.33333%;
  left: calc(100% / 12 * 10);
  left: -webkit-calc(100% / 12 * 10);
  left: -moz-calc(100% / 12 * 10); }

.pull-10 {
  left: -83.33333%;
  left: calc(-100% / 12 * 10);
  left: -webkit-calc(-100% / 12 * 10);
  left: -moz-calc(-100% / 12 * 10); }

He llegado a usar sistemas de cuadrícula bastante, pero nunca he necesitado usar estas clases. Probablemente porque no sé lo que hacen. Entonces mis preguntas son:

¿Qué suele hacer una clase push?¿Qué suele hacer una clase pull?¿Cuándo quieres usar cada uno de ellos?¿Cómo usas cada uno de ellos?Proporcione un ejemplo de violín para demostrar.