Bootstrap

O Bootstrap 3 já tem o CSS desenvolvido para ser "responsivo", basta usar o sistema de grid que eles disponibilizam e as classes container e container-fluid dependendo do caso.

Só fiquei na dúvida porque tem casos que preciso dizer, por exemplo:

div class="table table-responsive"

No caso, alguns componentes possuem uma classe que insere certo comportamentos que os deixam "responsivos". A tabela se refere ao link (table responsive). Veja que na documentação há uma explicação para inserir a classe table-responsive:

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

No caso a classe .table-responsive deve ir no elemento pai da tabela:

<div class="table-responsive">
    <table class="table">
        ...
    </table>
</div>

Assim o comportamento da tabela será o seguinte:

Quando a tela tiver um tamanho menor que 768px, e a tabela tiver mais elementos que couber na tela ela terá uma rolagem na horizontal. Para entender segue um print:

A primeira tabela não possui o elemento container, veja que no cabeçalho da tabela ouve uma quebra detinha para que todas as colunas coubessem em 100% da tela. Já na segunda tabela ele tem o elemento pai com a classe .table-responsive, no caso os elementos continuam fluindo para a direita "ultrapassando" o limite da tela. Como o CSS é preparado para "ser responsivo" ele cria uma rolagem horizontal.

Conseguiu entender?

Ainda temos outras classe que ajudam alguns elementos a serem mais responsivos no Bootstrap:

• img-responsive
• Responsive utilities
• E o próprio grid system

Eu achei sua explicação excelente! Parabéns. Obrigada pela atenção. show...você é demais.