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

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

首先，重写引导程序类不是一个好习惯。检查此代码。

替换为您的图片

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
	
  
<div class="col-12 col-sm-4 col-sm-push-8">
    <img class="img-fluid" src="C://Users/sabarinath j/Pictures/Screenshots/Screenshot (1).png">
  </div>
<div class="col-12 col-sm-8 col-sm-pull-4 text-center text-sm-left">
	  <h1>AYAN ADHIKARY</h1>
	  <h4> WELCOME TO MY PAGE</h4>
    <p> GM20L48@gmail.com <br>
      Ph No.- 800001710 <br>
      INDIA</p>
  </div>  
</div>

Answer 2

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

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

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

<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>