適切な列の下のモバイルの行ボタンを注文してください

Question

私は3つの別々の列を持つ行と、新しい行のこれらの列ごとに別々のボタンを持っています。

これはデスクトップ上では問題なく動作しますが、モバイル上ではすべてのボタンがすべての列の下にスタックされるため、どのボタンが何に関連するのか混乱します。現在

：

は、私が好きなもの：

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

注：私はあなたが何ができるブートストラップ

Answer 1

を使用している次のようにだけではなく、別の行を追加するよりも、各グリッドにして「col-sm-4を」ボタンを追加されますそして、

<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> 

だからコードがあることを持っている必要があり、さらに別の3つのグリッドを作成

<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