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

Question

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

Actual Result

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

Answer 1

Your HTML is not valid and your are using bootstrap in wrong pattern, See how i wrapped the second and third line into a larger div then using rows inside that div.

<div class="container" id="centered">
    <div id="outletsBackground">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="topicBox littleSquare"></div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="topicBox littleSquare"></div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <div class="topicBox littleSquare"></div>
            </div>
        </div>
        <div class="row">
            <!-- Wrapping two boxes into a larger box -->
            <div class="col-lg-8 col-md-8 col-xs-12">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <div class="topicBox littleSquare"></div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <div class="topicBox littleSquare"></div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <div class="topicBox littleSquare"></div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <div class="topicBox littleSquare"></div>
                    </div>
                </div>

            </div>

            <div class="col-lg-4 col-md-4 col-xs-12">
                <div class="topicBox bigSquare"></div>
            </div>

        </div>

    </div>

</div>

in CSS I am adding body background as red just for demo.

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

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

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

body {
    background-color: red;
}