Предотвращение взлома сетки Bootstrap-3 на мобильном устройстве

Question

Я использую Laravel с начальной загрузкой для проекта и, похоже, столкнулся с проблемой отзывчивости.У меня есть карточки, содержащие данные о постах, внутри этих карточек есть ряды.Я хочу, чтобы карты выглядели одинаково как на рабочем столе, так и на мобильных устройствах, но Bootstrap продолжает ломать мои строки.

На рабочем столе карты выглядят так, как будто я хочу, чтобы они:

Но на мобильном они выглядят так:

Я пытался использовать container-fixed, container-fluid, а также col-xs- вместо col-md-.

Это мой код:

	<div class="card card-sm">
   <div class="card-body row align-items-center">
	<div class="container">
	  <div class="col-md-4"><img src="https://pull03-glorybee.netdna-ssl.com/media/catalog/product/cache/1/thumbnail/302x302/9df78eab33525d08d6e5fb8d27136e95/c/e/cedar-hive-0.jpg" style="max-width: 100%;"></div>
		  <div class="col-md-8">
			 <h2>Testtitle</h2>
			 <p>This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...</p>
			 <hr>
			 <div class="row">
				<div class="col-md-5 align-items-center">
				   <img src="https://www.weepie-plugins.com/wp-content/uploads/2018/02/5-star-rating-for-WeePie-Plugins-example.gif" style="height: 30px;"> 
				   <h5>Some Text here</h5>
				</div>
				<div class="col-md-3"><img src="https://widopublishing.com/wp-content/uploads/2013/01/Square-Profile-pic-2011edit.jpg" style="max-width: 100%;"></div>
				<div class="col-md-4">
				   <div>
					  <h5>Username probably..</h5>
					  <p><br>A Little bit of text there<br></p>
				   </div>
				</div>
			 </div>
		  </div>
	  </div>
   </div>
</div>

Я искал в Интернете, но ничего, что я нашел, не подходило для моей задачи, либо людям обычно нравилось автоматическое разбиение строк, я их неправильно использовал или я искалсовершенно неправильная вещь.

Заранее спасибо!

Answer 1

                            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
                            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
                            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
                            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

                            
                                  <div class="container" >
                                    <div style="overflow-x:auto;">
                                  <div class="card card-sm" style="width: 1000px;overflow-x:auto;">
                                   <div class="card-body" style="">
                                    <div class="row" >
                                    <div class="col-4"><img src="https://pull03-glorybee.netdna-ssl.com/media/catalog/product/cache/1/thumbnail/302x302/9df78eab33525d08d6e5fb8d27136e95/c/e/cedar-hive-0.jpg" style="max-width: 100%;"></div>
                                      <div class="col-8">
                                       <h2>Testtitle</h2>
                                       <p>This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...</p>
                                       <hr>
                                       <div class="d-flex" style="display: flex;">
                                        <div class="rating-img col-4">
                                           <img src="https://www.weepie-plugins.com/wp-content/uploads/2018/02/5-star-rating-for-WeePie-Plugins-example.gif" style="height: 30px;"> 
                                           <h5>Some Text here</h5>
                                        </div>
                                        <div class="user-img col-4"><img src="https://widopublishing.com/wp-content/uploads/2013/01/Square-Profile-pic-2011edit.jpg" style="max-width: 100%;width: auto;"></div>
                                        <div class="user-info col-4">
                                            <h5>Username probably..</h5>
                                            <p><br>A Little bit of text there<br></p>
                                        </div>
                                       </div>
                                      </div>
                                    </div>
                                  </div>
                                   </div>
                                </div>
                              </div>

У меня есть одно решение для этого.используйте этот код, если вы не хотите разбивать строку.этот код соответствует вашему желанию.и я поставил свиток для отзывчивости.Я надеюсь, что это будет полезно.