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

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> [email protected] <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> [email protected] <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>

Answer 2

首先，重写bootstrap类并不是一个好习惯。检查此代码。

替换为您的图像

<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> [email protected] <br>
      Ph No.- 800001710 <br>
      INDIA</p>
  </div>  
</div>