RWD - adjusting to mobile phones and tablets

The most convenient way is to use Bootstrap library (getbootstrap.com). With it, the website is divided into 12 blocks, which create columns col. The division is made depending on the device on which the website is displayed. Class types include: xl (from 1200 px), lg (from 922px), md (from 768px), sm (from 576px):

<div class="container">
 <div class="row">
  <div class="col-12 col-sm-8 col-md-8">
  </div>
  <div class="col-12 col-sm-4 col-md-3 offset-md-1">
  </div>
 </div>
</div>

Block order sorting depending on resolution, command order:

<div class="container">
 <div class="row">
  <div class="col-6 col-sm-6 order-sm-2">
  </div>
  <div class="col-6 col-sm-6 order-sm-1">
  </div>
 </div>
</div>

Whereas directly in CSS3 code, media types can be adjusted with the use of media-query:

@media only screen and (min-width:992px) and (max-width:1199px){
}