Bootstrap combinando linhas (rowpan)

Estou testando o Twitter Bootstrap e fiquei preso com andaimes básicos com linhas. Revisei a documentação várias vezes e vejo colunas de aninhamento em que você pode aninhar colunas em uma coluna, mas não consigo localizar a capacidade de combinar linhas em uma e alinhar com a coluna ao lado das linhas não combinadas.

A figura abaixo deve ilustrar o que eu quero realizar.

A única solução alternativa que encontrei é o uso de tabelas, mas não gosto dessa ideia, pois minha opinião é que a capacidade de resposta não funcionaria com o uso de tabelas.

Alguém tem alguma solução elegante para isso? A maior parte do layout da Web que eu preciso precisará de um bom nível de flexibilidade, por isso será ótimo se eu puder pegar algo útil aqui.

Divs empilham verticalmente por padrão, portanto, não há necessidade de tratamento especial de "linhas" dentro de uma coluna.

div {
  height:50px;
}
.short-div {
  height:25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Aqui está o violino .

Você deve usar o aninhamento de colunas de autoinicialização.

Consulte Bootstrap 3 ou Bootstrap 4 :

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(Tela Em Fiddle, ampliar sua tela de teste para ver o resultado, porque eu estou usando col- md - *, então colunas pilhas responsivas)

Nota : Não tenho certeza de que o BS2 permita o aninhamento de colunas , mas na resposta de Paul Keister, o aninhamento de colunas não é usado. Você deve usá-lo e evitar reinventar o css enquanto o bootstrap se sai bem.

A altura das colunas é automática, se você adicionar uma segunda linha (como eu faço no meu exemplo), a altura da coluna se adaptará.

Nota: Este foi o Bootstrap 2 (relevante quando a pergunta foi feita).

Você pode fazer isso usando row-fluidpara criar uma linha com base em fluido (porcentagem) dentro de uma existente block.

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

Aqui está um exemplo do JSFiddle .

Notei que havia uma margem esquerda ímpar que aparece (ou não aparece) para os intervalos dentro do row-fluiddepois do primeiro. Isso pode ser corrigido com um pequeno ajuste de CSS (é o mesmo CSS aplicado ao primeiro filho, expandido para aqueles anteriores ao primeiro filho):

.row-fluid [class*="span"] {
    margin-left: 0;
}

Verifique este. espero que ajude por completo.

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}

A resposta de Paulo parece derrotar o propósito do bootstrap; o de responder ao tamanho da janela de exibição / tela.

Aninhando linhas e colunas, você pode obter o mesmo resultado, mantendo a capacidade de resposta.

Aqui está uma resposta atualizada para esse problema;

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

Você pode ver o código aqui.