¿Cómo alineo los elementos de la cuadrícula en el diseño de fluido de arranque?

Tengo un diseño fluido usando el bootstrap de Twitter, en el que tengo una fila con dos columnas. La primera columna tiene mucho contenido, que quiero llenar normalmente. La segunda columna solo tiene un botón y algo de texto, que quiero alinear en relación con la celda de la primera columna.

Esto es lo que tengo:

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

Esto es lo que quiero:

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

He visto soluciones que hacen que el primer tramo tenga una altura absoluta, y coloque el segundo tramo en relación con él, pero sería preferible una solución donde no tuviera que especificar la altura absoluta de mis divisiones. También estoy abierto a un replanteamiento completo de cómo lograr el mismo efecto. No estoy casado con este uso de los andamios, simplemente parecía tener más sentido para mí.

Este diseño como violín:

http://jsfiddle.net/ryansturmer/A7buv/3/

Tenga en cuenta que: para los usuarios de Bootstrap 4+, considere la solución de Christophe (Bootstrap 4 introdujo flexbox, que proporciona una solución de CSS más elegante). Lo siguiente funcionará para versiones anteriores de Bootstrap ...

Ver http://jsfiddle.net/jhfrench/bAHfj/ para una solución de trabajo.

//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
  var $this = $(this);
  $this.css('margin-top', $this.parent().height() - $this.height())
});

En el lado positivo:

• En el espíritu de las clases de ayuda existentes de Bootstrap , llamé a la clase pull-down.
• solo el elemento que se "derriba" necesita ser clasificado, así que ...
• ... es reutilizable para diferentes tipos de elementos (div, span, section, p, etc.)
• está bastante bien soportado (todos los principales navegadores son compatibles con margin-top)

Ahora las malas noticias:

• requiere jQuery
• no es, como está escrito, responde (lo siento)

Esta es una solución actualizada para Bootstrap 3 (aunque debería funcionar para versiones anteriores) que usa solo CSS / LESS:

http://jsfiddle.net/silb3r/0srp42pb/11/

Establece el tamaño de fuente en 0 en la fila (de lo contrario, terminará con un espacio molesto entre columnas), luego elimina los flotadores de columna, establece la visualización en inline-block, restablece su tamaño de fuente y luego vertical-alignse puede configurar en Cualquier cosa que necesites.

No se requiere jQuery.

Puedes usar flex:

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}

Necesitas agregar un estilo para span6, smthg así:

.row-fluid .span6 {
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

y este es tu violín: http://jsfiddle.net/sgB3T/

Aquí también hay una directiva angularjs para implementar esta funcionalidad

    pullDown: function() {
      return {
        restrict: 'A',
        link: function ($scope, iElement, iAttrs) {
          var $parent = iElement.parent();
          var $parentHeight = $parent.height();
          var height = iElement.height();

          iElement.css('margin-top', $parentHeight - height);
        }
      };
    }

Simplemente configure el padre display:flex;y el hijo a margin-top:auto. Esto colocará el contenido secundario en la parte inferior del elemento primario, suponiendo que el elemento primario tenga una altura mayor que el elemento secundario.

No es necesario intentar calcular un valor para margin-topcuando tiene una altura en su elemento primario u otro elemento mayor que su elemento secundario de interés dentro de su elemento primario.

Basado en las otras respuestas aquí hay una versión aún más receptiva. Realicé cambios en la versión de Ivan para admitir ventanas gráficas de <768 píxeles de ancho y para admitir mejor el cambio de tamaño de la ventana lenta.

!function ($) { //ensure $ always references jQuery
    $(function () { //when dom has finished loading
        //make top text appear aligned to bottom: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
        function fixHeader() {
            //for each element that is classed as 'pull-down'
            //reset margin-top for all pull down items
            $('.pull-down').each(function () {
                $(this).css('margin-top', 0);
            });

            //set its margin-top to the difference between its own height and the height of its parent
            $('.pull-down').each(function () {
                if ($(window).innerWidth() >= 768) {
                    $(this).css('margin-top', $(this).parent().height() - $(this).height());
                }
            });
        }

        $(window).resize(function () {
            fixHeader();
        });

        fixHeader();
    });
}(window.jQuery);

Esto se basa en la solución de cfx, pero en lugar de establecer el tamaño de fuente en cero en el contenedor principal para eliminar los espacios entre columnas agregados debido a la pantalla: bloque en línea y tener que restablecerlos, simplemente agregué

.row.row-align-bottom > div {
    float: none;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -0.25em;
}

a la columna divs para compensar.

Bueno, no me gustaba ninguna de esas respuestas, mi solución del mismo problema era que añadir lo siguiente: <div>&nbsp;</div>. Entonces, en su esquema se vería así (más o menos), en mi caso no fueron necesarios cambios de estilo:

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|   
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------

.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}