Я работаю над адаптивной страницей профиля для всех устройств, поэтому я использовал сеточную систему bootstrap 4, чтобы разделить страницу для своих нужд. Я хотел, чтобы страница выглядела следующим образом: - 
в настольных компьютерах и вот так: - 
так что я попробовал col-sm работать ответственно с небольшими экранами фрагмент кода
/* Profile Main Page Cards , holders...etc */
.holderTitle{
font-family: hana;
font-size: 34px !important;
color:black !important;
text-align: center !important;
}
/* Profile Image Thubmail */
.ProfileAvatar{
border: 1px solid #ddd; /* Gray border */
border-radius: 4px; /* Rounded border */
padding: 5px; /* Some padding */
width: 150px; /* Set a small width */
}
/* Add a hover effect (blue shadow) */
.ProfileAvatar:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.holderText{
color:black !important;
}
.messagebtn{
text-align: center !important;
font-family: hana !important;
}
.fontawsomeBIO{
font-family: hana !important;
}
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops ( large Mointer )
*/
@media (min-width: 1281px) {
/* Profiler Card and Container (Profile Holder) on large Screen */
.profileholder{
width:45%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 100%;
height: auto;
}
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
.profileholder{
width:70%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 100%;
height: auto;
}
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
.profileholder{
width:95%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 100%;
height: auto;
}
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.profileholder{
width:75%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 100%;
height: auto;
}
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
.profileholder{
width:85%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 90%;
height: auto;
}
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
.profileholder{
width:100%;
height: auto;
}
/* ProfileHolder Ends Here */
/* Profile Content Card And Container */
.ProfileContent{
width: 100%;
height: auto;
}
}
<html>
<head>
<title>Responsive Profile</title>
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- Bootstrap CDN Font-awesome -->
</head>
<body>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<div class="row">
<div class="col-sm-6">
<div class="container">
<br>
<div class="card profileholder">
<img class="card-img-top ProfileAvatar" src="..\upload\tmp\img.jpg" alt="alt"></img>
<div class="card-body">
<h4 class="card-title holderTitle">الإسم</h4><br><br>
<a name="PMbutton" id="private" class="btn btn-danger btn-block messagebtn" href="#" role="button">رسالة</a>
<a name="d" id="ds" class="btn btn-dark btn-block messagebtn" href="#" role="button">متابعة</a>
<i class="fas fa-map-marker-alt fas-3x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="col-sm-auto">
<br>
<div class="card ProfileContent">
<div class="card-body">
Content Here tab panel....etc
</div>
</div>
</div>
</div>
</body>
советую: - показать код на полной странице по крайней мере, самое важное - это правильный контейнер под col-sm-auto < --- тег содержит панель вкладок, на панели будет более 4 вкладок, что достаточно для всей ширины экрана смартфона, поэтому на панели будет отображаться любое предложение, чтобы сделать его отзывчивым.