Bootstrap - span column across multiple rows

Question

I need to build a grid layout that resembles the following:

I've got three four set up but am encountering situations where I need the row span for my div across two rows. Rows 2 and 3 need an object that sits between two rows centered. Is this at all possible?

Thanks in advance!

EDIT (CODE):

<style type="text/css">

    .fill-row-1 {
        width: 100%;
    }

    .fill-row-2 {
        width: 100%;
    }

    .fill-row-3 {
        width: 100%;
    }

    .fill-row-4 {
        width: 100%;
    }

    .circular-btn {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% !important;
    }

</style>

    <script type="text/javascript">

    $(document).ready(function () {
        var row1Height = $('#row1').height();
        $('.fill-row-1').css("height", row1Height);

        var row2Height = $('#row2').height();
        $('.fill-row-2').css("height", row2Height);

        var row3Height = $('#row3').height();
        $('.fill-row-3').css("height", row3Height);

        var row4Height = $('#row4').height();
        $('.fill-row-4').css("height", row4Height);
    });


    </script>

    <div class="row" id="row1" style="text-align:center;">
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#1"/>
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#4" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#2" />
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#5" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#3" />
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#6" />
            </div>
        </div>
    </div>
    <div class="col-md-2">

        <div class="row">
            <div class="col-md-12">
                <input type="button" class="btn btn-default fill-row-1" value="#1"/>
            </div>
        </div>

    </div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">
                <input type="button" class="btn btn-default fill-row-1" value="#2" />
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">
                <input type="button" class="btn btn-default fill-row-1" value="#3" />
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#1" />
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#4" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#2" />
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#5" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#3" />
            </div>
            <div class="col-md-6">
                <input type="button" class="btn btn-default" value="#6" />
            </div>
        </div>
    </div>
</div>
<div class="row" id="row2" style="text-align:center;">
    <div class="col-md-2">
        <input type="button" class="btn btn-default fill-row-2" value="#3" />
    </div>
    <div class="col-md-2">
        <input type="button" class="btn circular-btn fill-row-2" value="#1" />
    </div>
    <div class="col-md-2 " >
            <input type="button" class="btn circular-btn fill-row-2" value="#1" />
    </div>
    <div class="col-md-2">
        <input type="button" class="btn circular-btn fill-row-2" value="#1" />
    </div>
</div>
<div class="row" id="row3">
    <div class="col-md-2">

    </div>
</div>
<div class="row" id="row4">
    <div class="col-md-2">

    </div>
</div>

Answer 1

You can use flexbox which is much easier and straight-forword than bootstrap.

Here is the documentation from W3C.

You can find a cool article from CSS-Tricks in order to understand the basics.

Take a look at my example below.

body {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100%;
}
div {
  display: flex;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 3px;
}
.sc div {
  display: flex;
  background-color: lightgray;
}
#fx {
  height: 106px;

  background-color: lightblue;
}
section {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section class=sc>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div id=fx></div>
  <div></div>
</section>