html - My posts are not responsive using bootstrap -

hello iam building website in arabic language use bootstrap , bootstrap rtl ...the website in laptops , desktops (large screen) exacly want .....in mobile navbar , header , footer , widgets 100% responsive ...but posts not responsive @ thumbnail take of screen , paraghraph start next thumbnail , down in every line 1 word....this posts code in html

   <div class="container-fluid" id="container-post">   <article class="row">     <section class="col-lg-9">       <div class="panel panel-default">          <div class="panel-body">             <div class="panel-header">                <a href="#"><h2>هذا النص يمكن ان يستبدل في نفس المساحة</h2></a>              </div>             </p>             <img src="images/post_img.png" />             <p >لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها ا إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد،لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها ا إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميما. لموقع. لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التىلقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العدي</p>              <div class="read-more">                <a href="#"><h2>اقرأ المزيد</h2></a>           </div>           </div>           </div> 

and css code

.panel-header h2 {font-family:hacen beirut poster; margin-top: -10px; color:#27402d;  }  .panel-body {background-color:#b8a97e; border: 1px solid; }  .panel-body p {font-family:hacen beirut poster; font-size: 13pt; float:left; margin-right: 185px; margin-top:-223px;}  .panel-body img {float:right;}  .panel-default {border: none; }  .panel-header :hover {text-decoration: none;}  .read-more h2 {float:left;  font-family:hacen beirut poster;   margin-top:-25px; font-size: 14pt; color:black; background-color: darkgoldenrod; width:80px; line-height: normal; text-align: center;}  .read-more  {color: white;}  .read-more :hover {color: white;}  .panel  {margin:8px;}  .panel-header  :hover {color:black;}

and tried make font small in media query mobile paragraph not accept resize in mobile ...i dont know why h2 title of post accept problem not in h2 in pragraph media query code:

@media screen , (max-width:660px){            .panel-body p {font-size: 8pt;}              }

your code not standard. fixe go .panel-body h1. bringing h1 use margin!!! delete code or comment.

/* margin-right: 185px; */ /* float: left; */ /* margin-top: -223px; */ 

ok, use code bringing h1.

display: inline; 

end css maybe you

.panel-body img {     float: right;     margin-left: 15px; } .panel-body h1 {     font-family: hacen beirut poster;     font-size: 13pt;     /* float: left; */     display: inline;     /* margin-right: 185px; */     /* margin-top: -223px; */ } .read-more h2 {     float: left;     font-family: hacen beirut poster;     /* margin-top: -25px; */     font-size: 14pt;     color: black;     background-color: darkgoldenrod;     width: 80px;     line-height: normal;     text-align: center; }