Как изменить элементы компоновки начальной загрузки на меньшем разрешении?

Я хочу изменить элементы компоновки бутстрапа в разных положениях, когда в мобильных разрешениях (max-width: 768px) и меньше.Как изменить элементы компоновки начальной загрузки на меньшем разрешении?

Эта фотография показывает, что мне нужно сделать именно:

EXAMPLE

Как и то, что мне нужно изменить, чтобы добиться того, что позиции?

Мой код: 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; 
    } 
}

источник

2016-03-20 Paulius Rimgaila

Используйте 2 разные строки вместо 1, чтобы стек элементов.

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

источник

2016-03-20 19:28:05 andnowchris

Вы можете быть более конкретным? Я не знаю, что писать в CSS-коде. –

Если вы видите выше, я вложил ваш контактный элемент в другую строку над контактной информацией. Элементы

CONTACTS

– andnowchris

Как изменить элементы компоновки начальной загрузки на меньшем разрешении?

ответ

Смежные вопросы