Quando olho para muitos sistemas e estruturas de grade CSS, eles geralmente têm uma configuração padrão de coluna e linha com larguras de porcentagem. Algo assim, por exemplo:

coluna da grade padrão:

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

No entanto, além disso, muitas vezes vejo outras classes como.push ou.pull. Por exemplo, assim:

classes 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); }

Eu vim para usar sistemas de grade um pouco, mas nunca precisei usar essas classes. Provavelmente porque não sei o que eles fazem. Então, minhas perguntas são:

O que uma classe push geralmente faz?O que uma classe pull geralmente faz?Quando você gostaria de usar cada um deles?Como você usa cada um deles?Forneça um exemplo de violino para demonstrar.