перемещение верхнего div вниз и вниз div на ip для небольших устройств в bootstrap 3

Я делаю простую веб-страницу, и у меня есть небольшая проблема на моих маленьких устройствах. Поэтому мне нужно установить положение на этих двух div.перемещение верхнего div вниз и вниз div на ip для небольших устройств в bootstrap 3

<div class="row"> 
    <div class="col-md-7"> 
     <div class="right" id="center"> 
      <img src="img/Golden-One-Page-Web-Template_40.png" alt=""> 
     </div> 
    </div> 
    <div class="col-md-5"> 
     <div class="left" id="center"> 
      <h4>february 2014<br/>Our Triumph</h4> 
      <p>Proin iaculis purus consequat sem cure<br/>digni ssim. Donec porttitora entum suscipit<br/>aenean rhoncus posuere odio in tincidunt. Proin<br/>iaculis purus consequat sem cure digni<br/>ssim. Donec porttitora entum suscipit aenean.</p> 
     </div> 
    </div> 
</div><!-- End row-->

так что мне нужно, чтобы переместить этот left DIV выше, и что right DIV ниже в небольших устройствах на начальной загрузке 3, если кто-нибудь пр мысли об этом, пожалуйста, дай мне надлежащий и чистый ответ

спасибо

источник

2014-11-07 Chathura Buddika

Я считаю 5 дивы там. Not 2. Кроме того, необходимо отметить пару вещей: (a) элементы не должны иметь одинаковые идентификаторы. (b) вам нужно будет размещать теги «br» во всех абзацах (привязать их к границам div, если хотите) (C), можете ли вы предоставить [jsfiddle] (http://jsfiddle.net/) для демонстрации? – jbutler483

@ jbutler483 см. Описание Я упомянул классы, называемые left и righ –

Я использую bootstrap, пожалуйста, покажите мне пример в bootstrap 3 –

Поскольку вы используете Twitter Bootstrap, вы можете использовать свои классы push и pull, чтобы получить необходимый эффект. Сначала начните с мобильного макета, а затем нажмите и вытащите элементы на более высоких контрольных точках.

<div class="row"> 
    <div class="col-sm-12 col-md-5 col-md-push-7"> 
     <div class="left" id="center"> 
      <h4>february 2014<br>Our Triumph</h4> 
      <p>Proin iaculis purus consequat sem cure<br>digni ssim. Donec porttitora entum suscipit<br>aenean rhoncus posuere odio in tincidunt. Proin<br>iaculis purus consequat sem cure digni<br>ssim. Donec porttitora entum suscipit aenean.</p> 
     </div> 
    </div> 
    <div class="col-sm-12 col-md-7 col-md-pull-5"> 
     <div class="right" id="center"> 
      <img src="http://placekitten.com/g/200/300" alt=""> 
     </div> 
    </div> 
</div><!-- End row-->

Bootply здесь: http://www.bootply.com/BKR9irhYSy

Более подробную информацию о заманивать можно найти здесь: http://getbootstrap.com/css/#grid-column-ordering

источник

2014-11-07 16:13:27 Marcelo

отличный ответ спасибо –

перемещение верхнего div вниз и вниз div на ip для небольших устройств в bootstrap 3

ответ

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