如何使最後的div列留在移動視圖的頁面頂部？

Question

我把我的div分爲4列，第一列有一個上一頁按鈕箭頭，第二列和第三列包含內容，最後一列包含下一頁按鈕箭頭。但在移動視圖中，最後一列箭頭位於頁面底部，我需要將它放在靠近前一個按鈕箭頭的頂部。

<div class="container"> 
       <div class="row"> 
        <div class="col-md-1"> 
         <form> 
          <input type="button" class="default_previous sprite" alt="Submit"> 
         </form> 

        </div> 

        <div class="col-md-4"> 
         <div class="container-two-grid"> 

          <div class="grid-two imageandtext"> 
           <figure> 
            <div class="imageandtext image_grid"> 
            <label for="selimg1"> 
            <img src="assets/images/painting.jpg" class="img-thumbnail"> 
            </label> 
            <input type="radio" name="selimg" id="selimg1"> 
            <div class="caption"> 
             <p>Painting</p> 
            </div> 
            </div>      
            <div class="imageandtext image_grid"> 
            <label for="selimg2"> 
             <img src="assets/images/photography.jpg" class="img-thumbnail" > 
             </label> 
             <input type="radio" name="selimg" id="selimg2"> 
             <div class="caption"> 
              <p>Photography</p> 
             </div></div> 
            </figure> 
           </div> 

           <div class="grid-two imageandtext"> 
           <figure> 
            <div class="imageandtext image_grid"> 
            <label for="selimg3"> 
            <img src="assets/images/drawing.jpg" class="img-thumbnail"> 
            </label> 
            <input type="radio" name="selimg" id="selimg3"> 
            <div class="caption"> 
             <p>Drawing</p> 
            </div> 
            </div>      
            <div class="imageandtext image_grid"> 
            <label for="selimg4"> 
             <img src="assets/images/sculpture.jpg" class="img-thumbnail" > 
             </label> 
             <input type="radio" name="selimg" id="selimg4"> 
             <div class="caption"> 
              <p>Sculpture</p> 
             </div></div> 
            </figure> 
           </div> 

           <div class="grid-two imageandtext"> 
           <figure> 
            <div class="imageandtext image_grid"> 
            <label for="selimg5"> 
            <img src="assets/images/painting.jpg" class="img-thumbnail"> 
            </label> 
            <input type="radio" name="selimg" id="selimg5"> 
            <div class="caption"> 
             <p>Painting</p> 
            </div> 
            </div>      
            <div class="imageandtext image_grid"> 
            <label for="selimg6"> 
             <img src="assets/images/photography.jpg" class="img-thumbnail" > 
             </label> 
             <input type="radio" name="selimg" id="selimg6"> 
             <div class="caption"> 
              <p>Photography</p> 
             </div></div> 
            </figure> 
           </div> 
           <div class="grid-two imageandtext"> 
           <figure> 
            <div class="imageandtext image_grid"> 
            <label for="selimg7"> 
            <img src="assets/images/drawing.jpg" class="img-thumbnail"> 
            </label> 
            <input type="radio" name="selimg" id="selimg7"> 
            <div class="caption"> 
             <p>Drawing</p> 
            </div> 
            </div>      
            <div class="imageandtext image_grid"> 
            <label for="selimg8"> 
             <img src="assets/images/sculpture.jpg" class="img-thumbnail" > 
             </label> 
             <input type="radio" name="selimg" id="selimg8"> 
             <div class="caption"> 
              <p>Sculpture</p> 
             </div></div> 
            </figure> 
           </div> 

          </div>  


         </div> 
         <div class="col-md-6"> 
          <div class="container-form-grid"> 
           <div class="subject_art"> 
            <form> 
             <select class="mdb-select"> 
              <option value="" disabled selected>Subject of ART</option> 
              <option value="1">Option 1</option> 
              <option value="2">Option 2</option> 
              <option value="3">Option 3</option> 
             </select> 
            </form> 
           </div> 

           <form class="form-inline"> 

            <h4>Dimensions</h4> 
            <select class="mdb-select"> 
             <option value="" disabled selected>Units</option> 
             <option value="1">Option 1</option> 
             <option value="2">Option 2</option> 
             <option value="3">Option 3</option> 
            </select> 

           </form> 
           <form class="form-inline"> 

            <div class="md-form form-group"> 

             <input type="text" id="form1" class="form-control"> 
             <label for="form1" class="">Width</label> 
            </div> 

            <div class="md-form form-group"> 
             <input type="text" id="form1" class="form-control"> 
             <label for="form1" class="">Height</label> 
            </div> 

            <div class="md-form form-group"> 
             <input type="text" id="form1" class="form-control"> 
             <label for="form1" class="">Depth</label> 
            </div> 


           </form> 
           <form> 
            <div class="form_weight"> 
             <div class="md-form"> 
              <input type="text" id="form41" class="form-control"> 
              <label for="form41" class="">Weight</label> 
             </div> 
            </div> 

           </form> 
           <form class="form-inline"> 
           <h4>ART Specifics</h4> 
            <div class="form_row"> 
             <ul> 
              <li> 
               <select class="mdb-select"> 
                <option value="" disabled selected>Medium</option> 
                <option value="1">Option 1</option> 
                <option value="2">Option 2</option> 
                <option value="3">Option 3</option> 
               </select> 
              </li> 
              <li> 
               <select class="mdb-select"> 
                <option value="" disabled selected>Material</option> 
                <option value="1">Option 1</option> 
                <option value="2">Option 2</option> 
                <option value="3">Option 3</option> 
               </select> 
              </li> 
              <li><select class="mdb-select"> 
               <option value="" disabled selected>Styles</option> 
               <option value="1">Option 1</option> 
               <option value="2">Option 2</option> 
               <option value="3">Option 3</option> 
              </select></li> 
             </ul> 
            </div> 





           </form> 
           <form> 
            <div class="md-form form-width"> 
             <input type="text" id="form1" class="form-control"> 
             <label for="form1" class="">Keywords/Tags (Type 5 to 20 items) </label> 
            </div> 
           </form> 
          </div> 
         </div> 
         <div class="col-md-1"> 
          <form> 
           <input type="button" class="default-next sprite" alt="Submit"> 

          </form> 
         </div> 
        </div> 
       </section> 

CSS（上按鈕和下一個按鈕）

.uploadart_content .default-next{ 
     width: 83px; 
     height: 65px; 
     margin-right: 8px; 
     display: inline-block; 
     vertical-align: middle; 
     background-position: -71px -235px; 
     margin-top: 341px; 
     border:none; 
     outline: none; 

    } 
    .uploadart_content .default_previous{ 
     width: 83px; 
     height: 65px; 
     margin-right: 8px; 
     display: inline-block; 
     vertical-align: middle; 
     background-position: -139px -235px; 
     margin-top: 341px; 
     border:none; 
     outline: none; 
    } 

Answer 1

你能做到這一點在CSS使用媒體屬性移動寬度：

@media all and (max-width:767px){ 
    .row{ 
     position: relative; 
     padding-top:30px;//the height of your arrows 
    } 
    .row .col-md-1{ 
     position: absolute; 
     top: 0; 
    } 
    .row .col-md-1:first-child{ 
     left:0; 
    } 
    .row .col-md-1:last-child{ 
     right:0; 
    } 
} 

或者，您可以停止使用引導向左浮動並開始使用display：flex。您可以使用訂單屬性排在第二位的最後一個孩子

Answer 2

或者，您也可以添加一個隱藏的col下一個按鈕，該按鈕將顯示在手機中。

<div class="col-md-1"><!-- your current previous button --> 
    <form> 
    <input type="button" class="default_previous sprite" alt="Submit"> 
    </form> 
</div><!-- your current previous button --> 
<div class="col-md-1 hideondesktop"><!-- Added Next button --> 
    <form> 
    <input type="button" class="default-next sprite" alt="Submit"> 
    </form> 
</div><!-- Added Next button --> 
...other cols 
...other cols 
...other cols 
<div class="col-md-1 hideonmobile"><!-- editedNext button --> 
<form> 
    <input type="button" class="default-next sprite" alt="Submit"> 
</form> 
</div><!-- edited Next button --> 

CSS

.hideondesktop{ 
    display:none; 
} 
    @media all and (max-width:767px){ 
    .hideondesktop{ 
     display:block; 
    } 
    .hideonmobile{ 
     display:none; 
    } 
    } 

希望這有助於。