css - 下揃え - レスポンシブ レイアウト

Question

整列の問題でこの問題があります。私は twitter ブートストラップを使用してこのレスポンシブ サイトを構築しています。私のクライアントは、次のように 2 つの異なるスパンからいくつかのコンテンツを下に揃えるように求めています。

彼は、右側のスパン 4 の右側にある灰色のボックスを、もう一方のスパン 4 の左側にある flexSlider と下に揃えたいと考えています。これはどのように達成できますか？上部のコンテンツは動的で、はるかに長くなる可能性があるため、右側のマージンは使用できません。相対配置ラッパーを使用して絶対配置しようとしましたが、灰色のボックスの幅が狭くなり、ブラウザーウィンドウのサイズを小さくしようとするとすべてが台無しになります..絶対配置以外に他の方法はありますか?

マークアップは次のとおりです。

               <div class="span8">
                    <div class="row section professionIntro">
                        <div class="span4">
                            <div class="flexslider section">
                                  <ul class="slides">
                                    <li>
                                      <img src="img/slide1.png" alt="slide 1" />
                                    </li>
                                    <li>
                                      <img src="img/slide2.png" alt="slide 2" />
                                    </li>
                                    <li>
                                      <img src="img/slide3.png" alt="slide 3" />
                                    </li>
                                  </ul>
                            </div>
                        </div>
                        <div class="span4">
                            <p class="intro">Som dataingeniør jobber du med systemutvikling og drift av maskiner eller systemer.</p>
                            <ul class="infoExpand">
                                <li class="expandVideo">
                                    <h2 class="videoSign">Video dataingeniøren hverdag</h2>   
                               </li>
                            </ul>
                        </div>    
                    </div>

どんな助けにも感謝..

Answer 1

css レスポンシブを追加します。

http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css

ボタンの位置: 絶対が変換中の場合: 位置: 静的;

.videoSign {
    position : static;
    bottom:auto;
    top:auto;
    left:auto;
    right:auto;
}

例: http://jsfiddle.net/sEryj/