3

I'm trying to create the following table with bootstrap, need the middle column spanning 2 rows. I'm having problems. Any help? I know the code below isn't right at all.

<div class="row">
<div class=col-sm-2">1</div>
<div class="col-sm-8">2</div>
<div class=col-sm-2">3</div> 
</div>
<div class="row">
<div class=col-sm-2">4</div>
<div class=col-sm-2">5</div>
</div>

enter image description here

jpaugh
  • 6,634
  • 4
  • 38
  • 90
Bacardi
  • 35
  • 4
  • What does your code look like? – Hatchet Jan 24 '16 at 21:57
  • 1
    Possible duplicate of [Bootstrap combining rows (rowspan)](http://stackoverflow.com/questions/16351404/bootstrap-combining-rows-rowspan) – sergdenisov Jan 24 '16 at 22:29
  • 2
    Possible duplicate of [How can I get a Bootstrap column to span multiple rows?](http://stackoverflow.com/questions/16390370/how-can-i-get-a-bootstrap-column-to-span-multiple-rows) – Turnip Jan 24 '16 at 22:31

1 Answers1

1

You just need to look at what is happening a bit differently. You actually want to have 1 row with 3 columns

  • 1st column: #1 & #4
  • 2nd column: #2
  • 3rd column: #3 & #5
<div class="row">
  <div class="col-sm-2">
    <div> 1</div>
    <div> 4</div>
  </div>
  <div class="col-sm-8">
    2
  </div>
  <div class="col-sm-2">
    <div> 3</div>
    <div> 5</div>
  </div>
</div>
jpaugh
  • 6,634
  • 4
  • 38
  • 90
tayvano
  • 1,308
  • 1
  • 11
  • 18
  • The thing is though I want #2 above #4 so those contexts is higher than #4 for indexing purposes – Bacardi Jan 24 '16 at 23:23
  • You will most likely need to do something custom for this. Perhaps using flexbox or masonry.js. You obviously have to weigh whether implementing a custom solution is worth the value of indexing. – tayvano Jan 25 '16 at 00:07