Html 如何将div动态地放置在两行中的一列中？

如何将一个div放在两行中的一列中，以使其能够在引导过程中动态工作

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>

---

我还想了解如何在站点的不同部分轻松移动较大的框。

您的HTML无效，并且您使用的引导模式错误，请参阅我如何将第二行和第三行包装到较大的div中，然后使用该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>

---

建议您首先使用JSFIDLE复制结果，首先使用有效的HTML。非常感谢xam解决了我的问题，并向我展示了我在引导方面还有更多的工作要做。我是两天前开始工作的，所以我还是有点困惑。欢迎你提出任何其他问题，也请投票表决。我的回答将是一件好事。我没有足够的声誉来做这件事，但一旦我做了，我会回来投票表决

<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>

.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;
}