slavapegaskin

1. Всё зависит от дизайн макета. Обычно на смартфонах - это одна колонка, на планшетах в портретной ориентации - две. На десктопах как вам удобно, ну или как вас ограничивает фреймворк.
2. Тут тоже всё зависит от дизайн макета - какова ширина одной колонки, отступ и сколько колонок используется в модульной сетке. Формулу расчет можно найти здесь. Советую попробовать самостоятельно написать модульную сетку опираясь на статью на чистом CSS. Если не желаете разбираться скачиваете исходники Bootstrap и в файле variables.less у соответственных переменных меняете значения, после чего компилируете все в CSS (также это можно сделать на сайте Bootstrap и скачать уже готовый CSS файл). Если знакомы с LESS попробуйте разобраться по исходникам Bootstrap как там генерируется модульная сетка и написать свою.

@keyframes fade{

    from {
      opacity: 0;
    }

    to{
      opacity: 1;
    }
}

body {
  animate: fade 1s;
}