How to place a div inside two rows but in one column dynamically?

How do I put a div inside two rows but in one column in a way that it will work dynamically with bootstrap?

HTML

<div class="container" id="centered">
  <div id="outletsBackground">
    <div class="row">
      <ul class="list-inline">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
        </div>
      </ul>
    </div>
    <div class="row">
      <ul class="list-inline">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="topicBox littleSquare"></div>
            </a>
          </li>
          <div>
            <a href="#">
              <div class="topicBox bigSquare"></div>
            </a>
          </div>
        </div>
      </ul>
    </div>
  </div>
</div>

CSS

.topicBox {
    display: inline-block;
    line-height: 24px;
    text-align: center;
    background: white;

}

.littleSquare {
    width: 315px;
    height: 250px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.bigSquare {
    width: 315px;
    height: 525px;
    margin-bottom: 10px;
    margin-top: 10px;
}

Expected Result http://ift.tt/1Jvp6eG

Result http://ift.tt/1OaqdpE

I would would also like information on how I could easily make the larger boxes move in different sections of the site.