在适当的列下方的移动设备上订购行按钮

Question

我有一行有三个单独的列，并且每行都有一个单独的按钮。

这在桌面上工作正常，但在移动设备上它将所有按钮堆叠在一起，因此令人困惑的是哪个按钮与什么相关。

目前：

我想要的是什么：

HTML

   <div class="container-fluid">
     <div class="row">
<div class="fadein bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
    <div class="col-sm-4">
         <img src="/img/button-1.png" alt="button-1" class="middleimages">
         <div class="box-content">
                       <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
                       <figure><img src="/img/pound-coins.jpg" alt="saving money image" title="Saving money" class="tripleimage">
                       <figcaption><b>Feel like you're walking on a tightrope every day?</b> <br>Stuck in a pay cheque to pay cheque cycle, can't keep your budget in check, dont have a budget, use credit cards or have no savings? <br><br>

                       <b>Lesson 1</b> - Learn how I escaped the pay cheque to pay cheque cycle.</figcaption>

                       </figure>  
              </div>
              </div>
    <div class="col-sm-4 columnBorder"> 

       <img src="/img/button-2.png" alt="button-1" class="middleimages">
       <div class="box-content column-border">
           <p class="alltextbig text-uppercase"><b>Saving</b> to buy a home?</p>
           <figure>
             <img src="/img/saving-to-buy-a-home.jpg" alt="Buying a house" title="Saving to buy a house" class="tripleimage"><figcaption><b>Is saving for a house causing you anxiety?</b> Stressed out over a correction or rise in interest rates?<br><br>
Worried if you don't buy now house prices will continue to rise and out price you?<br><br>
             <b>Lesson 2</b> - Tips to rapidly save for your future home.
             </figcaption>
             </figure>
      </div>
      </div>
    <div class="col-sm-4"> 
       <img src="/img/button-3.png" alt="button-1" class="middleimages">
       <div class="box-content">
      <p class="alltextbig text-uppercase"><b>Want</b> to make more money?</p>
      <figure>
        <img src="/img/going-travelling.jpg" alt="How to make more money" title="How to make more money"  class="tripleimage">
        <figcaption><b>Want to increase your income?</b>
       <br>Want to drive a better car, go travelling or live in a better neighbourhood? Increase your income to scale up your savings and substantially improve your current lifestyle. 

        <br><br><b>Lesson 3</b> - It's not just about being frugal. How to easily increase your income without taking large risks.
        </figcaption>
        </figure>
        </div>  
    </div>
    </div>
  </div>
</div>
   <div class="container-fluid">
     <div class="row text-center"">

  <div class="col-sm-4">
<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
</div>
  <div class="col-sm-4">
<button data-sumome-listbuilder-id="6ffe5fc5-349c-41f9-acf4-085a82c7f0b9" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
</div>
  <div class="col-sm-4">
<button data-sumome-listbuilder-id="d2faa459-edd3-4c4a-9e34-997a2bfc4f21" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
</div>
</div>
</div>  

直播链接： http://185.123.97.138/~kidsdrum/moneynest.co.uk/index2.html

注意：我正在使用Bootstrap

Answer 1

你可以做的只是在每个网格中添加按钮＆＃34; col-sm-4＆＃34;如下所示，而不是添加单独的行并创建另外三个网格，

<div class="col-sm-4"> 
       <img src="/img/button-3.png" alt="button-1" class="middleimages">
       <div class="box-content">
      <p class="alltextbig text-uppercase"><b>Want</b> to make more money?</p>
      <figure>
        <img src="/img/going-travelling.jpg" alt="How to make more money" title="How to make more money"  class="tripleimage">
        <figcaption><b>Want to increase your income?</b>
       <br>Want to drive a better car, go travelling or live in a better neighbourhood? Increase your income to scale up your savings and substantially improve your current lifestyle. 

        <br><br><b>Lesson 3</b> - It's not just about being frugal. How to easily increase your income without taking large risks.
        </figcaption>
        </figure>
         <button data-sumome-listbuilder-id="6ffe5fc5-349c-41f9-acf4-085a82c7f0b9" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
        </div>  

所以代码应该是，

<div class="container-fluid">
     <div class="row">
<div class="fadein bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
    <div class="col-sm-4">
         <img src="/img/button-1.png" alt="button-1" class="middleimages">
         <div class="box-content">
                       <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
                       <figure><img src="/img/pound-coins.jpg" alt="saving money image" title="Saving money" class="tripleimage">
                       <figcaption><b>Feel like you're walking on a tightrope every day?</b> <br>Stuck in a pay cheque to pay cheque cycle, can't keep your budget in check, dont have a budget, use credit cards or have no savings? <br><br>

                       <b>Lesson 1</b> - Learn how I escaped the pay cheque to pay cheque cycle.</figcaption>

                       </figure>  
           <button data-sumome-listbuilder-id="6ffe5fc5-349c-41f9-acf4-085a82c7f0b9" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
</div>
              </div>
              </div>
    <div class="col-sm-4 columnBorder"> 

       <img src="/img/button-2.png" alt="button-1" class="middleimages">
       <div class="box-content column-border">
           <p class="alltextbig text-uppercase"><b>Saving</b> to buy a home?</p>
           <figure>
             <img src="/img/saving-to-buy-a-home.jpg" alt="Buying a house" title="Saving to buy a house" class="tripleimage"><figcaption><b>Is saving for a house causing you anxiety?</b> Stressed out over a correction or rise in interest rates?<br><br>
Worried if you don't buy now house prices will continue to rise and out price you?<br><br>
             <b>Lesson 2</b> - Tips to rapidly save for your future home.
             </figcaption>
             </figure>
         <button data-sumome-listbuilder-id="d2faa459-edd3-4c4a-9e34-997a2bfc4f21" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
      </div>
      </div>
    <div class="col-sm-4"> 
       <img src="/img/button-3.png" alt="button-1" class="middleimages">
       <div class="box-content">
      <p class="alltextbig text-uppercase"><b>Want</b> to make more money?</p>
      <figure>
        <img src="/img/going-travelling.jpg" alt="How to make more money" title="How to make more money"  class="tripleimage">
        <figcaption><b>Want to increase your income?</b>
       <br>Want to drive a better car, go travelling or live in a better neighbourhood? Increase your income to scale up your savings and substantially improve your current lifestyle. 

        <br><br><b>Lesson 3</b> - It's not just about being frugal. How to easily increase your income without taking large risks.
        </figcaption>
        </figure>
         <button data-sumome-listbuilder-id="6ffe5fc5-349c-41f9-acf4-085a82c7f0b9" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>
        </div>  
    </div>
    </div>
  </div>

   <div class="container-fluid">
     <div class="row text-center">

</div>
</div>  
</div