Html @媒体查询无法正确使用引导

我正在使用Bootstrap的jumbotron进行媒体查询。我想垂直对齐jumbotron内的两个div，以实现移动响应。问题是，在一定的宽度下，jumbotron会像预期的那样做出反应，我右边的照片就留在那里，而不是与第一个div垂直对齐

为了防止出现这种情况，我添加了媒体查询以将照片与其父div的左侧对齐，但没有得到结果

代码和图片附在后面

<div class="jumbotron">
  <div class="row">
    <div id="about2" class="col-md-6">
      <h1>About Me</h1>
      <p>This page contains a brief information about Mehmet Eyüpoğlu.
      </p>
      <a href="index.html">
        <i id="home-button" class="fas fa-home"></i>
      </a>
    </div>

    <div class="col-md-6">
      <img id="about-foto" src="images/unnamed.jpg" alt="profile.photo">
    </div>

  </div>
</div>

如果您的媒体查询出现语法错误，请重试！

@媒体屏幕（最大宽度：768px）{
#关于福托{
左缘：5%；
}
}

不要使用边距来对齐这样的内容，尤其是在使用引导时

熟悉，您可以为每个断点定义一个宽度

我将您的标记更改为使用col-md-8作为文本，使用col-md-4作为图像。重要的是数字加起来总是12（因为这是引导程序用于一行的数字）

这意味着对于中等（md）尺寸及以上的屏幕，您将被一列md-8宽度和md-4宽度分开，对于每个较小的屏幕，其宽度将为-12（100%）

#关于2{
字体大小：35px；
边缘顶部：50px；
}
#关于福托{
最大宽度：70%；
边界半径：10px；
}

关于我
本页包含有关Mehmet Eyüpoğlu的简要信息。

working fine@MehmetEyüpoğlu我做了编辑，你能再试一次吗。

#about2 {
  font-size: 35px;
  margin-top: 50px;
}

#about-foto {
  max-width: 70%;
  border-radius: 10px;
  margin-left: 60%;
}

//The actual problem starts here: 

@media (max-width: 768px) {
  #about-foto {
    margin-left: 5%; 
  }
}