css - How can I get a Bootstrap column to span multiple rows? -


i'm trying figure out how following grid bootstrap.

i'm not sure how i'd create box (number 1) spans 2 rows. boxes generated programmatically in order laid out. box 1 welcome message.

enter image description here

any ideas on best way go this?

for bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>      <div class="row">      <div class="col-md-4">          <div class="well">1              <br/>              <br/>              <br/>              <br/>              <br/>          </div>      </div>      <div class="col-md-8">          <div class="row">              <div class="col-md-6">                  <div class="well">2</div>              </div>              <div class="col-md-6">                  <div class="well">3</div>              </div>          </div>          <div class="row">              <div class="col-md-6">                  <div class="well">4</div>              </div>              <div class="col-md-6">                  <div class="well">5</div>              </div>          </div>      </div>  </div>  <div class="row">      <div class="col-md-4">          <div class="well">6</div>      </div>      <div class="col-md-4">          <div class="well">7</div>      </div>      <div class="col-md-4">          <div class="well">8</div>      </div>  </div>

for bootstrap 2:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>    <div class="row-fluid">      <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>      <div class="span8">          <div class="row-fluid">              <div class="span6"><div class="well">2</div></div>              <div class="span6"><div class="well">3</div></div>          </div>          <div class="row-fluid">              <div class="span6"><div class="well">4</div></div>              <div class="span6"><div class="well">5</div></div>          </div>      </div>  </div>  <div class="row-fluid">      <div class="span4">          <div class="well">6</div>      </div>      <div class="span4">          <div class="well">7</div>      </div>      <div class="span4">          <div class="well">8</div>      </div>  </div>

see demo on jsfiddle (bootstrap 2): http://jsfiddle.net/sxcqh/52/


Comments