如何根据窗口大小更改对象的顺序？ （HTML / CSS）

Question

我正在使用Bootstrap框架创建一个网站，并为我们的团队创建一个“关于我们”的部分，其中一个column的图片和第二个column的名称/ bio。我正在随附的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>

这是替代：

Picture | Name+Bio

Name+Bio | Picture

Picture | Name+Bio

Name+Bio | Picture

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

Picture

Name+Bio

Name+Bio

Picture

等

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

当完整尺寸时，我让它们在容器中从左/右交替，但是当它减小到一定大小以下时，格式化是垂直的，正如预期的那样，但是顺序格式很差。这是我必须在HTML或CSS中改变的吗？

Answer 1

结帐Bootstrap column ordering。它描述了如何使用推拉类来实现所需的结果。

Answer 2

使用bootstrap 4的flexbox列，如果您希望@media (max-width: 1199px)规则重新排序这些子项，请将一个类分配给要重新排序的子项的父行，然后使用flex order属性重新排序。要始终如一地picture + name+bio，请在name+bio首先出现的行中添加一个类，并在该行中使用#picture { order: -1; }将图片放在第一位。

@media (max-width: 1199px) {
  .reorder #picture {
    order: -1;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<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="https://i.stack.imgur.com/2C22p.jpg" 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>
  <hr>
  <div class="row row-eq-height reorder" id="ethan">

    <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 class="col-md-6" id="picture">
      <img src="https://i.stack.imgur.com/2C22p.jpg" width="500" height="350" alt="Ethan Blagg">
    </div>
    
  </div>
</div>