css - 如何根据窗口大小更改对象的顺序？ (HTML/CSS)

Question

我正在使用 Bootstrap 框架创建一个站点，并为我们的团队设置了一个“关于我们”部分，其中一个 列 中有一张图片，第二个 中有姓名/简介列。我在随附的 CSS 文件中使用 @media (max-width: 1199px) { 处理窗口更改。

该部分当前的格式是:

<div class="container team">
   <h2>Meet the Team</h2>
   <hr>
   <div class="row row-eq-height" id="ethan">
      <div class="col-md-6" id="picture">
         <img src="[Image Link]" width="500" height="350" alt="Ethan Blagg">
      </div>

      <div class="col-md-6" id="bio">
         <div class="row" id="name">
            <h3>Ethan Blagg</h3>
            <hr>
         </div>

         <div class="row" id="info">
            <p> [bio goes here] </p>
         </div>
      </div>
   </div>
</div>

这交替:

图片 | 姓名+简历

姓名+简历 | 图片

图片 | 姓名+简历

姓名+简历 | 图片

我的问题是当我的窗口宽度低于 992px 时，格式更改为:

图片

姓名+简历

姓名+简历

图片

等等

当窗口大小改变时，如何改变对象的顺序？

当全尺寸时，我让它们在容器中从左/右交替，但当它减小到一定尺寸以下时，格式会像预期的那样垂直，但顺序格式不正确。这是我必须在 HTML 或 CSS 中更改的内容吗？

Answer 1

查看 Bootstrap column ordering .它描述了如何使用推类和拉类来实现您想要的结果。