bootstrap строка, идущая над другим в мобильном представлении в html

Question

Я создал секцию html в bootstrap, которая содержит контейнер и две основные строки, код подобен приведенному ниже:

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
  .addonscard {
    width: 100%;
    height: 181px;
    padding: 2%;
    border: 1px solid #efefef;
  }
  
  .addonsimage {
    width: 100%;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .add-on-add-unit {
    font-size: 14px;
    line-height: 20px;
    padding: 2px 12px 2px 10px;
    border-radius: 10px;
    display: inline-block;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .addonsdesc {
    font-size: 13px
  }
  
  #showmore {
    text-align: center;
  }
  
  .clearme {
    clear: both;
    margin-top: 2%;
  }
</style>


<section class="addons">

  <div class="container">

    <div class="row">

      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test1.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="" class="add-on-add-unit">+ Add</a>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
            </div>
          </div>
        </div>
      </div>



      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test2.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="" class="add-on-add-unit">+ Add</a>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="clearme"></div>
    <div class="row">
      <div class="col-md-10" id="showmore">
        <a href="#" class="showmore">+ Show more add-ons</a>
      </div>
    </div>


  </div>

теперь проблема в

<div class="row">
  <div class="col-md-10" id="showmore">
    <a href="#" class="showmore">+ Show more add-ons</a>
  </div>
</div>

эта строка находится над первым рядом в мобильном представлении, я пытался использовать мобильный запрос для настройки, но он все еще не перемещается, может кто-нибудь сказать, что может быть здесь не так, заранее спасибо

Answer 1

установить высоту для строк и установить плавающее право для них!

@media only screen and (max-width: 576px) {
  .row{
  height:fit-content;
  float:right;
  }
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
  .addonscard {
    width: 100%;
    height: 181px;
    padding: 2%;
    border: 1px solid #efefef;
  }
  
  .addonsimage {
    width: 100%;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .add-on-add-unit {
    font-size: 14px;
    line-height: 20px;
    padding: 2px 12px 2px 10px;
    border-radius: 10px;
    display: inline-block;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .addonsdesc {
    font-size: 13px
  }
  
  #showmore {
    text-align: center;
  }
  
  .clearme {
    clear: both;
    margin-top: 2%;
  }
</style>


<section class="addons">

  <div class="container">

    <div class="row">

      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test1.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="" class="add-on-add-unit">+ Add</a>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
            </div>
          </div>
        </div>
      </div>



      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test2.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="" class="add-on-add-unit">+ Add</a>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="clearme"></div>
    <div class="row">
      <div class="col-md-10" id="showmore">
        <a href="#" class="showmore">+ Show more add-ons</a>
      </div>
    </div>


  </div>

Answer 2

Удалите высоту (181px) из класса ".addonscard" в CSS и попробуйте:

.addonscard {
  width: 100%;
  height: auto; // height is updated from 181px to auto..
  padding: 2%;
  border: 1px solid #efefef;}