css - Colspanは、ウィンドウのサイズ変更時にTwitter Bootstrapを整列させますか?

Question

私は Twitter Bootstrap を使用するのが初めてで、グリッド編成のアイデアに頭を悩ませることはできません。基本的に、私はこのページを右の情報セットが左に広がるように配置したいと考えています。行で情報をネストしようとしましたが、迷子になるまでネストし続けました。以下の JSfiddle の例では、ウィンドウの幅が十分に広い場合はテーブルがきれいに見えますが、ウィンドウの幅を短くすると、ピースが乱れます。右の 1 ～ 6 は一緒にスタックする必要があります (スタックする必要がある場合)。前もって感謝します。

http://jsfiddle.net/wBg8Y/

<div class="container">

  <!-- Static navbar -->
  <div class="navbar navbar-default col-lg-12">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src='../../../images/mpIcon.PNG' class='sm-icon' />
        <!--<span class="glyphicon glyphicon-search"></span>-->
       Menubar
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">

        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div><!--<span class="glyphicon glyphicon-star"></span>-->
        </form>
      </ul>
    </div><!--/.nav-collapse -->
  </div>

  <!-- Main component for a primary marketing message or call to action -->
  <!--<div class="jumbotron col-md-10 col-md-offset-1">-->
  <div class="jumbotron col-md-12">
    <div class="row">
      <div class="col-md-6">
          left top   
       </div>

       <div class="col-md-3">right 1</div>
       <div class="col-md-3">right 2</div>

      <div class="col-md-6">
        <div class="col-md-12">Markets</div>

            <div class="col-md-4">markets left 1</div>
            <div class="col-md-4">markets left 2</div>
            <div class="col-md-4">markets left 3</div>

            <div class="col-md-4">markets left 4</div>
            <div class="col-md-4">markets left 5</div>
            <div class="col-md-4">markets left 6</div>



      </div>

        <div class="col-md-3">right 3</div>
        <div class="col-md-3">right 4</div>

        <div class="col-md-3">right 5</div>
        <div class="col-md-3">right 6</div>

    </div> <!-- /row -->        
  </div> <!-- /jumbotron -->  

  <div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
  <div class="col-md-6 text-right">
    <a href='#'>About</a> | 
    <a href='#'>Contact</a> |
    <a href='#'>FAQ</a> | 
    <a href='#'>Help</a> | 
    <a href='#'>Support</a>

  </div>

</div> <!-- /container -->

Answer 1

への変更：

  <!-- Static navbar -->
  <div class="navbar navbar-default col-lg-12">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src='../../../images/mpIcon.PNG' class='sm-icon' />
        <!--<span class="glyphicon glyphicon-search"></span>-->
       Menubar
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">

        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div><!--<span class="glyphicon glyphicon-star"></span>-->
        </form>
      </ul>
    </div><!--/.nav-collapse -->
  </div>

  <!-- Main component for a primary marketing message or call to action -->
  <!--<div class="jumbotron col-md-10 col-md-offset-1">-->
  <div class="jumbotron col-md-12">
    <div class="row">
      <div class="col-md-6">
          left top   
       </div>

       <div class="col-md-3">right 1</div>
       <div class="col-md-3">right 2</div>

      <div class="col-md-6">
        <div class="col-md-12">Markets</div>

            <div class="col-md-4">markets left 1</div>
            <div class="col-md-4">markets left 2</div>
            <div class="col-md-4">markets left 3</div>

            <div class="col-md-4">markets left 4</div>
            <div class="col-md-4">markets left 5</div>
            <div class="col-md-4">markets left 6</div>



      </div>

        <div class="col-md-3">right 3</div>
        <div class="col-md-3">right 4</div>

        <div class="col-md-3">right 5</div>
        <div class="col-md-3">right 6</div>

    </div> <!-- /row -->        
  </div> <!-- /jumbotron -->  

  <div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
  <div class="col-md-6 text-right">
    <a href='#'>About</a> | 
    <a href='#'>Contact</a> |
    <a href='#'>FAQ</a> | 
    <a href='#'>Help</a> | 
    <a href='#'>Support</a>

  </div>

</div> <!-- /container -->