使用 CSS 将元素放置在另一个元素周围

我想用 HTML 和 CSS 实现这个结果：

其中红色框是一个大内容（PDF内容），蓝色框围绕它组织。首先在它的旁边，然后，当有足够的空间时，在它的下面。

我的 HTML 结构如下，但我可以更改它：

<div id="outerContainer">
    <div id="bigRedBox"></div>
    <div>
        <ul id="blueContentList">
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
        </ul>
    </div>
</div>

到现在为止，定位是这样的：

我不知道如果不设置两个容器（一个在侧面，一个在下面）是否可行，我可以这样做，但会让我写很多 JS。

您可以通过让所有元素浮动并成为彼此的兄弟元素来实现您想要的目的。

#bigRedBox {
  width:80%;
  height:150px;
  background-color:red;
  float:left;
  margin:5px;
}
.blueContent {
  width:15%;
  height:50px;
  background-color:blue;
  float:left;
  margin:5px;
}

<div id="outerContainer">
  <div id="bigRedBox"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
</div>