使用 html/css 缩小页面时，如何让连续的第二列位于第一列的顶部？

Question

下面您会看到我有一个 div 容器，其中包含一行和两列，宽度和高度相等。图片在左边，文字在右边。我目前正在使用@media，这样当屏幕达到一定宽度时，两列将彼此重叠，并且它们将成为一列。我的问题是，当我的@media 激活而不是相反时，有没有办法让第二列高于第一列？提前致谢。

<div class="resources-flex-container" >
    <div class="resources-img-section">
        <img src="../images/resources.png" alt="" class="resources-img">
    </div>

    <div class="resources-main-content">
        <p class="resources-section-title">Lorem Ipsum Dolor Sit</p>

        <p class="resources-section-description">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quibusdam rerum, saepe exercitationem earum quas architecto, autem, accusantium facere aliquam repellat minus quia quis eum ad? Cupiditate, corporis quae? Libero!
        </p>
    </div>
</div>

CSS

.resources-flex-container {
    padding-left: 5%; 
    padding-right: 5%; 
    background-color: rgb(238,43,42, .15);
    align-items: center;
    padding-top: 2%;
    padding-bottom: 2%;
}

@media (min-width: 56.25em){
    .resources-flex-container {
        display: flex;  
    }
}

  .resources-main-content {
    flex: 1;  
    padding: 20px;
    border-radius: 12px;
  }

  .resources-section-title {
    font-size: 30px;
    font-weight: 600; text-align: center;
  }

  .resources-section-description {
    font-size: 1.125rem;
  }

  .resources-button-section {
    text-align: center;
  }

  .resources-button {
    color:white;
    width: 270px;
    font-weight: 500;
    background-color: #CE4A4A;
    border-radius: 50px;
    font-size: 1.75rem;
    text-align: center;
    text-decoration: none;
    padding-top: .7%;
    padding-bottom: .7%;
    padding-right: 5%;
    padding-left: 5%;
    border: 0;
  }

  .resources-img-section {
    flex: .75 0 300px;
    padding: 20px;
    border-radius: 12px;
  }

  .resources-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%; 
    height: 80%;
    border-radius: 10px;
    box-shadow:  0px 0px 5px black;
  }

Answer 1

您可以添加flex-direction：column-reverse；属性在@media 查询 class 根据你的 min-width 和 max-width

h1, h2 {
  font-family: Lato;
}
.resources-flex-container {
  padding-left: 5%; 
  padding-right: 5%; 
  background-color: rgb(238,43,42, .15);
  align-items: center;
  padding-top: 2%;
  padding-bottom: 2%;
  display: flex;
  flex-direction: row;  
}

@media screen and (min-width: 56.25em ){
  .resources-flex-container {
    display: flex;
    flex-direction: column-reverse;  
  }
}
@media screen and (max-width: 600px) {
  .resources-flex-container {
    display: flex;
    flex-direction: column-reverse;  
  }
}
@media screen and (min-width: 601px) {
  .resources-flex-container {
    display: flex;
    flex-direction: row;  
  }
}

.resources-main-content {
  flex: 1;  
  padding: 20px;
  border-radius: 12px;
}

.resources-section-title {
  font-size: 30px;
  font-weight: 600; text-align: center;
}

.resources-section-description {
  font-size: 1.125rem;
}

.resources-button-section {
  text-align: center;
}

.resources-button {
  color:white;
  width: 270px;
  font-weight: 500;
  background-color: #CE4A4A;
  border-radius: 50px;
  font-size: 1.75rem;
  text-align: center;
  text-decoration: none;
  padding-top: .7%;
  padding-bottom: .7%;
  padding-right: 5%;
  padding-left: 5%;
  border: 0;
}

.resources-img-section {
  flex: .75 0 300px;
  padding: 20px;
  border-radius: 12px;
}

.resources-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%; 
  height: 80%;
  border-radius: 10px;
  box-shadow:  0px 0px 5px black;
}

<div class="resources-flex-container" >
    <div class="resources-img-section">
        <img src="../images/resources.png" alt="" class="resources-img">
    </div>

    <div class="resources-main-content">
        <p class="resources-section-title">Lorem Ipsum Dolor Sit</p>

        <p class="resources-section-description">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quibusdam rerum, saepe exercitationem earum quas architecto, autem, accusantium facere aliquam repellat minus quia quis eum ad? Cupiditate, corporis quae? Libero!
        </p>
    </div>
</div>

使用 html/css 缩小页面时，如何让连续的第二列位于第一列的顶部？

How to get second column in a row to go on top of the first column when the page shrinks using html/css?

html

css

multiple-columns

flexbox