html - 使用 Bootstrap 为不同的屏幕设置列类

Question

我正在尝试使用 Bootstrap 构建我的 UI。我正在尝试在一个 row 中为中型和大型屏幕设置 3 个 divs 彼此相邻。而对于在 768px 下面我想将它们一个放在另一个下面。

file.html

<section className="about" id="about">
  <div className="container-fluid">
   <div className="row boxes justify-content-md-center">
    <div className="col-sm-12 col-md-4 box">
    <div className="innerBox">
      <div className="icons">
        <img src={iconEducation} className="img-responsive" />
      </div>
      <div className="box-body">
        <h3 className="box-title">Title </h3>

        <div className="box-list">
          <div className="box-list-items">
            <div className="item-ul"><img src={dot} className="img-responsive" /></div>
            <div>
              <p>Text</p>
            </div>
          </div>
          <div className="box-list-items">
            <div><img src={dot} className="img-responsive" /></div>
            <div className="item-ul">
              <p>Text</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

所有三个 div 的 HTML 代码都是相同的。

问题

在大屏幕和中屏幕上，我在一行中有两个 div，在新行的下方有第三个。对于平板电脑屏幕，div 不会一个接一个地排列，但仍位于同一行中。我想要的布局是两个排成一行，第三个在下面。

文件.css

.about{
  padding: 127px 0 196px 0;
}

.about .row.boxes >div{
  margin: 0 20px 0 20px;
}

.about .box{
  height: 550px; 
  width: 100%;
  background-image: linear-gradient(144deg, #fdfdfd, #f9f9f9);
}
.about .innerBox{
  margin: auto;
  color: black;
  width: 100%;
  overflow: hidden;
}
.box-list-items > div {
  display: inline-block;
}

.box-list-items img {
  height: 35%; 
  width: 35%;
}

.icons { 
  height: 95px; 
  width: 95px;
  float: right;
  margin: 7% 5% 5% 0;
}
.icons img {
  width: 100%;
  height: 100%;
}


h3.box-title{
  font-size: 2.7em;
}

当我浏览 Bootstrap 文档时，我认为将类命名为 .col-md-4 会使我的 div 对齐 768px 在同一行中彼此相邻并在下方会将它们放置在一种 display: box View 中。

Answer 1

没有使用@media only screen 和所有，这会起作用:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">abc</div>
    <div class="col-xs-12 col-sm-4  col-md-4 col-lg-4">xyz</div>
    <div class="col-xs-12 col-sm-4  col-md-4 col-lg-4">123</div>
  </div>
</div>

您可以检查: https://jsfiddle.net/bfos8ttd/