col-md-6 在移动设备上没有响应答案

【问题标题】：col-md-6 is not responsive on mobilecol-md-6 在移动设备上没有响应
【发布时间】：2019-10-25 09:00:25
【问题描述】：

我在桌面上有以下部分，我需要在移动设备上制作图片在上方，橙色框在下方，但图片覆盖了所有内容。

桌面

移动

.second-section .box-orange {
  background-image: url("/img/fundo2.png");
  height: 400px;
  color: white;
  margin-top: 10%;
  margin-bottom: 10%;
}

.second-section .box-orange img {
  height: 550px;
  margin-top: -10%;
  margin-left: 2%;
  object-fit: cover;
}

.second-section .box-orange h3 {
  font-size: 2.5em;
  margin-bottom: 5%;		
}

.second-section .box-orange h3 .line {
  font-size: 2.5em;
  margin-bottom: 5%;		
}

.second-section .box-orange p {
  font-size: 2.5em;
  margin-bottom: 5%;		
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<section class="second-section">
  <div class="container">
    <div class="row align-items-center box-orange">
      <div class="col-md-6">
        <img class="w-100" src="img/campos.png">
      </div>
      <div class="col-md-6 ml-5 ml-md-0 text-center">
        <h3>lorem lorem! <div class="line"></div>
        </h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum nulla quod alias odio perspiciatis architecto, possimus, aliquid repellendus totam, quos nihil similique. Laborum eaque ipsa beatae amet sapiente temporibus. Rerum.
        </p>
      </div>
    </div>
  </div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

我不知道我是否应该以不同的方式构建我的 CSS，或者让某种媒体保持我需要的方式。

需要在移动设备中保持这种状态。

添加媒体后，结果就是这样。

@media only screen and (max-width: 800px) {
 .second-section img {
  height: unset;
  margin-left:unset;
}

 .textdiv {
  margin-left:0px;

}
}

【问题讨论】：

你写过媒体查询吗？如果没有，则删除 medai 查询中的绝对位置，它将适用于移动设备
请在 SO 上添加 CSS，不要在此处添加 scss
1) 引导网格分布为 12 列 2) 类：col-xs-6 表示（6 列用于 eXtra Small device like mobile） col-sm-6 表示（6 Columns for Small devices like Ipad col-md-6（中型设备为 6 列）等等.. 3）所以要解决这个问题，您可以使用适当的类，它会起作用
col-xs-6 不工作，

标签： html css twitter-bootstrap sass bootstrap-4

【解决方案1】：

HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="my.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>     
    </head>
    <body>
        <section class="second-section">
            <div class="container">
                <div class="row align-items-center box-orange">
                    <div class="col-md-6">
                    <img class="w-100" src="img.jpg">
                    </div>
                    <div class="col-md-6 ml-md-0 text-center textdiv">
                    <h3>lorem lorem! <div class="line"></div></h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum nulla quod alias odio perspiciatis architecto, possimus, aliquid repellendus totam, quos nihil similique. Laborum eaque ipsa beatae amet sapiente temporibus. Rerum.</p>
                    </div>
                </div>
            </div>
        </section>  
    </body>    
</html>

CSS：

我的.css：

.box-orange {
background-image: url("/img/fundo2.png");
height: 400px;
color: white;
margin-top: 10%;
margin-bottom: 10%;
}
.second-section img {
  height: 550px;
  margin-top: -10%;
  margin-left: 2%;
  object-fit: cover;
}
.second-section h3 {
  font-size: 2.5em;
  margin-bottom: 5%;
}
.second-section.line {
    width: 80%;
    border: 2px solid #77d3c2;
    position: absolute;
    left: 33%;
    top: 100%;
  }

  .second-section p {
  font-size: 1.4em;
  padding: 0% 10%;
}
.textdiv {
  margin-left: 3rem;
}

@media only screen and (max-width: 800px) {
    .second-section img {
      height: unset;
      margin-left:unset;

    }

    .textdiv {
      margin-left:0px;

    }
}

因为您已经为图像提供了固定高度，并且相同的高度也适用于移动版本，为了解决这个问题，我已经包含了媒体查询

检查一下，它会起作用的

【讨论】：

在那个地方添加 col-xs-6