Todaos los softwares tipo bootstrap, jquery, codeigniters, se caracterizan por tener muuucha documentación oficinal y no oficial.

Empezando con Bootstrap (oficial):
http://getbootstrap.com/getting-started/

Documentación HTML (no oficial - recomendada)
http://www.w3schools.com/html/

Documentación CSS (no oficial - recomendada)
http://www.w3schools.com/css/

Buenas Zaphiel, para empezar con bootstrap (Versión 3) lo mejor es como has hecho el header (si lo que quieres es mantenerlo fijo , a este se le llama sticky-header).

Sigamos pues,
Para empezar bien , te queda el scaffolding que es como lo llaman los señores de twitter, que es scaffolding? pues basicamente lo normal es que tus webs tengan columnas, estas se ordenan en PC de la siguiente forma:

Columna A ||| Columna B ||| Columna C .

Para que esto se adapte a mobile es IMPOSIBLE crear tres columnas dado que el ancho del móvil va a ser muy limitado dado que las columnas quedarían así:

Columna A,
Columna B,
Columna C,

Como hacer esto es muy facil:

Supongamos que cada columna es un div pues le vamos a pasar por class la nomenclatura utilizada:

<div class="columna-A"></div>
<div class="columna-B"></div>
<div class="columa-C"></div>

Ahora le integramos bootstrap:
Para mirarte las classes de bootstrap a fondo aqui las tienes explicadas en español y perfectamente:
http://librosweb.es/bootstrap_3/capitulo_2/tipos_de_rejillas.html
col-*-nºcol

Para mostrar tal y como deciamos las columnas esto quedaria asi:

<div class="columna-A col-md-4"></div>
<div class="columna-B col-md-4"></div>
<div class="columna-C col-md-4"></div>

Te preguntaras, y porque 4 y no 3 si son 3 columnas no? Seria lo logico... Pues no bootstrap interpreta que la suma de tus columnas debe dar un maximo de 12. De tal forma que 4+4+4=12  

Si quisieramos hacer dos columnas entonces seria:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

6+6 = 12

Esto en mobile quedaria así
col-md-6 (COLUMNA A)
col-md-6 (COLUMNA B)

Si tu quisieras tenerlo en mobile de la siguiente forma:

Col-A || Col-B

Tendrias que hacerlo así:

<div class="col-md-6 col-xs-6"></div>
<div class="col-md-6 col-xs-6"></div>

La clase col-xs-* lo que hace es interpretar para pantallas pequeñas. Mientras que md es para pantallas medianas.

En el link anterior lo vas a pillar todo rapidismo pero aún y así nunca esta de mas echar una mano, enviame un mensaje si necesitas alguna ayudita mas



Mod: Obligatorio el uso de etiquetas GeSHi.