Bootstrap düzen öğelerini daha küçük bir çözünürlükte nasıl değiştirebilirim?

Önyükleme düzeni öğelerini, mobil çözünürlüklerde (maks. Genişlik: 768 piksel) ve daha küçük olduğunda farklı konumlarda değiştirmek istiyorum.Bootstrap düzen öğelerini daha küçük bir çözünürlükte nasıl değiştirebilirim?

EXAMPLE

nasıl ve hangi ihtiyacım değiştirmek için pozisyonlara Bunu başarmak için:

Bu fotoğraf

i tam olarak ne yapmaları gerektiğini gösterir?

Kodum: jsfiddle

HTML

<!-- FOOTER--> 

     <section id="footer"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-2 left-col"> 
         <p><a class="contacts" href="#">CONTACTS</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>STUART LAWSON</h2> 
         <p>20 7409 8920</p> 
         <p>07870 555 930</p> 
         <p><a class="email" href="#">[email protected]</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>JOSH LAMB</h2> 
         <p>020 7409 8891</p> 
         <p>07976 988 486</p> 
         <p><a class="email" href="#">[email protected]</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>SAM BOREHAM</h2> 
         <p>020 7710 7963</p> 
         <p>07917 635 465</p> 
         <p><a class="email" href="#">[email protected]</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>DAN ROBERTS</h2> 
         <p>020 7710 7963</p> 
         <p>07801 143 909</p> 
         <p><a class="email" href="#">[email protected]</a></p> 
        </div> 
        <div class="col-md-2 right-col"> 
         <h2><a class="info" href="#">[email protected]</a></h2> 
        </div> 
       </div> 
      </div> 
     </section> <!-- END END FOOTER -->

CSS

/*** FOOTER ***/ 

.col-md-2 { 
    width: 16.66666666666667%; 
    float: left; 
    bottom: -67px; 
} 

.contacts { 
    position: absolute; 
    top: 110px; 
    left: 118px; 
} 

.col-md-2.contact-person { 
    color: #4cae4c; 
} 

#footer { 
    padding: 0 10px; 
    position: fixed; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

.left-col { 
    padding: 110px; 
    margin-left: -50px; 
    bottom: -65px; 
} 

.right-col { 
    padding: 86px; 
    position: absolute; 
    right: 76px; 
    bottom: -40px; 
} 

#footer p, #footer .email, #footer .contacts, #footer h2, #footer .info{ 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
    font-size: 1.063em; /*13pt in psd*/ 
    opacity: 1.0; 
} 

#footer .info { 
    font-size: 1.3em; /*15pt in psd*/ 
    position: absolute; 
    top: 95px; 
    right: -28px; 
} 

.row { 
    margin-left: -10px; 
    margin-right: -10px; 
} 
.row:before, .row:after{ 
    content: " "; 
    display: table; 
} 
.row:after{ 
    clear: both; 
} 

/***MEDIA QUERIES***/ 

@media(max-width: 768px){ 
    .container-fluid { 
     width: 550px; 
    } 
    #header .logo img{ 
     margin: 15px 0 20px; 
     height: 120px; 
    } 
    h1{ 
     font-family: 'GothamMedium', sans-serif; 
     position: absolute; 
     text-align: center; 
     font-size: 1.55em; /*19pt in psd*/ 
     margin: 100px 215px; 
    } 
    #footer .contacts { 
     left: 25px; 
     top: 95px; 
    } 
    .col-md-2.contact-person { 
     left: -110px; 
     top: 65px; 
     margin-left: 14px; 
    } 
    #footer{ 
     text-align: center; 
    } 
    .info{ 
     padding-top: 50px; 
     font-size: 9px; 
     text-align: center; 
    } 
    .left-col { 
     text-align: center; 
     margin-left: 0; 
     margin-right: 0; 
     padding: 100px; 
     font-size: 12px; 
    } 
}

kaynak

2016-03-20 Paulius Rimgaila

kullanın 2 farklı satırlar yerine 1 öğelerini yığın.

<section id="footer"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-2 left-col"> 
        <p><a class="contacts" href="#">CONTACTS</a></p> 
       </div> 
       </div> 
       <div class="row"> 
       <div class="col-md-2 contact-person"> 
        <h2>STUART LAWSON</h2> 
        <p>20 7409 8920</p> 
        <p>07870 555 930</p> 
        <p><a class="email" href="#">[email protected]</a></p> 
       </div> 
       <div class="col-md-2 contact-person"> 
        <h2>JOSH LAMB</h2> 
        <p>020 7409 8891</p> 
        <p>07976 988 486</p> 
        <p><a class="email" href="#">[email protected]</a></p> 
       </div> 
       <div class="col-md-2 contact-person"> 
        <h2>SAM BOREHAM</h2> 
        <p>020 7710 7963</p> 
        <p>07917 635 465</p> 
        <p><a class="email" href="#">[email protected]</a></p> 
       </div> 
       <div class="col-md-2 contact-person"> 
        <h2>DAN ROBERTS</h2> 
        <p>020 7710 7963</p> 
        <p>07801 143 909</p> 
        <p><a class="email" href="#">[email protected]</a></p> 
       </div> 
       <div class="col-md-2 right-col"> 
        <h2><a class="info" href="#">[email protected]</a></h2> 
       </div> 
      </div> 
     </div> 
    </section> <!-- END END FOOTER -->

kaynak

2016-03-20 19:28:05 andnowchris

Daha spesifik olabilir misiniz? CSS kodunda ne yazacağımı bilmiyorum. –

Yukarıda gördüğünüzde, kişinize "öğe bilgilerini iletişim sayfasının üstündeki başka bir satırın içine yerleştirdim" öğeleri

CONTACTS

– andnowchris

Bootstrap düzen öğelerini daha küçük bir çözünürlükte nasıl değiştirebilirim?

cevap

İlgili konular