Bootstrap combinando filas (rowspan)

Estoy probando Twitter Bootstrap y me quedé atascado con andamios básicos con filas. Volví a visitar su documentación varias veces y puedo ver columnas de anidación donde básicamente puedes anidar columnas dentro de una columna, pero no puedo ubicar la capacidad de combinar filas en una y alinearla con la columna al lado de las filas no combinadas.

La imagen de abajo debe ilustrar lo que quiero lograr.

La única solución alternativa que encontré es usar tablas, pero no me gusta esta idea ya que mi opinión es que la capacidad de respuesta no funcionaría con el uso de tablas.

¿Alguien tiene alguna solución elegante para esto? La mayoría del diseño web que necesito necesitará un excelente nivel de flexibilidad, por lo que sería genial si pudiera recoger algo útil aquí.

Los Divs se apilan verticalmente de manera predeterminada, por lo que no hay necesidad de un manejo especial de "filas" dentro de una columna.

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>

Aquí está el violín .

Debe usar el anidamiento de columnas de rutina de carga.

Ver Bootstrap 3 o 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/

(En la pantalla del violín, agrandar la pantalla de prueba para ver el resultado, porque estoy usando COL- MD - *, luego columnas pilas de respuesta)

Nota : No estoy seguro de que BS2 permita el anidamiento de columnas , pero en la respuesta de Paul Keister, el anidamiento de columnas no se usa. Debe usarlo y evitar reinventar css mientras bootstrap funciona bien.

La altura de las columnas es automática, si agrega una segunda línea (como lo hago en mi ejemplo), la altura de la columna se adapta.

Nota: Esto fue para Bootstrap 2 (relevante cuando se hizo la pregunta).

Puede lograr esto usando row-fluidpara hacer una fila basada en fluidos (porcentaje) dentro de una 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>

Aquí hay un ejemplo de JSFiddle .

Me di cuenta de que había un margen izquierdo extraño que aparece (o no aparece) para los tramos dentro del row-fluiddespués del primero. Esto se puede solucionar con un pequeño ajuste CSS (es el mismo CSS que se aplica al primer hijo, expandido a los que están más allá del primer hijo):

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

Revisa este. Espero que te ayude 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;}

La respuesta de Paul parece vencer el propósito de bootstrap; el de responder al tamaño de la ventana gráfica / pantalla.

Al anidar filas y columnas, puede lograr el mismo resultado, al tiempo que conserva la capacidad de respuesta.

Aquí hay una respuesta actualizada a este 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>

Puedes ver el codepen aquí.