html - 当屏幕缩小(响应)时，如何让盒子在彼此下方对齐

Question

当屏幕缩小(响应)时，我如何让方框在彼此下方对齐现在它们只是相互缩小。我将发布图片，让您更好地了解发生了什么。使用 CSS3、HTML5、Bootstrap v3.3.4

<section class="about-feature clearfix">
  <div class="container-fluid">
    <div class="row">
      <div class="block about-feature-1 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".3s">
        <h2>
                            TEXT
        </h2>
        <p>
          text
        </p>
      </div>
      <div class="block about-feature-2 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".5s">
        <h2 class="item_title">
                            TEXT
        </h2>
        <p>
          text
        </p>
      </div>
      <div class="block about-feature-3 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".7s">
        <h2 class="item_title">
                           TEXT
        </h2>
        <p>
          text
        </p>
      </div>
    </div>
  </div>
</section>

CSS

.about-feature {
margin-top: 50px;
}

.about-feature .block {
color: #fff;
width: 33.33%;
padding: 5%;
float: left;
}

.about-feature .block p {
font-weight: 300;
}

.about-feature .about-feature-1 {
background: #02bdd5;
}

.about-feature .about-feature-2 {
background: #00B0C7;
}

.about-feature .about-feature-3 {
background: #00A6BB;
}

Answer 1

你可以使用 flex 和 min-width 来跳过媒体查询:

.row {
  display: flex;
  flex-wrap: wrap;
}
.about-feature {
  margin-top: 50px;
}
.about-feature .block {
  color: #fff;
  flex: 1;
  min-width: 360px;
  ;
  padding: 5%;
  box-sizing: border-box;
}
.about-feature .block p {
  font-weight: 300;
}
.about-feature .about-feature-1 {
  background: #02bdd5;
}
.about-feature .about-feature-2 {
  background: #00B0C7;
}
.about-feature .about-feature-3 {
  background: #00A6BB;
}

<section class="about-feature clearfix">
  <div class="container-fluid">
    <div class="row">
      <div class="block about-feature-1 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".3s">
        <h2>
                            TEST
        </h2>
        <p>
          Run me in full page and resize window to check me out
        </p>
      </div>
      <div class="block about-feature-2 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".5s">
        <h2 class="item_title">
                            TEXT
        </h2>
        <p>
          text
        </p>
      </div>
      <div class="block about-feature-3 wow fadeInDown" data-wow-duration="500ms" data-wow-delay=".7s">
        <h2 class="item_title">
                           TEXT
        </h2>
        <p>
          text
        </p>
      </div>
    </div>
  </div>
</section>