Как использовать медиа-запрос в столбце, чтобы получить отзывчивую страницу?

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>

Answer 2

Прежде всего, переопределение класса начальной загрузки не является хорошей практикой. Проверьте этот код.

Заменить на изображение

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