html - 如何在列中使用媒体查询来获取响应页面？

Question

我想在窗口变小或移动模式图片显示在导航栏下方时执行此操作，然后显示我的姓名和其他详细信息。我不明白如何在其中使用媒体查询。

桌面预览

移动预览

@media (min-width: 700px) {
  .col-md-8 {
    margin-top: 5px !important;
    float: left;
    display: block;
  }
}

<div id="s">
  <div class="row">
    <div class="col-md-8">
      <h1>AYAN ADHIKARY</h1>
      <h4> WELCOME TO MY PAGE</h4>
      <p> GM20L48@gmail.com <br> Ph No.- 800001710 <br> INDIA
      </p>
    </div>
    <div class="col-md-4">
      <img src="1.png">
    </div>
  </div>
</div>

Answer 1

无需更改 Bootstrap 类，Bootstrap 的重点是添加类来定义您希望内容在每个屏幕上的显示方式。请记住，Bootstrap 的网格系统使用 12 列；因此，如果您定义一列使用 12 个空格，则下一个元素将转到新行。

在代码片段中，我告诉行的第一个元素在移动设备上使用 12 列中的 12 列，在平板设备及更高版本上使用 8 列，第二个元素也使用 12 列中的 12 列和 4 列在平板电脑及以上设备上；

您所要做的就是使用类来按照您需要的方式排列元素。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="s">
  <div class="row">
    <div class="col-12 col-md-8">
      <h1>AYAN ADHIKARY</h1>
      <h4> WELCOME TO MY PAGE</h4>
      <p> GM20L48@gmail.com <br> Ph No.- 800001710 <br> INDIA
      </p>
    </div>
    <div class="col-12 col-md-4">
      <img src="https://via.placeholder.com/300" class="img-fluid">
    </div>
  </div>
</div>