Выравнивание двух столбцов Twitter Bootstrap 3

Question

Использование Twitter Bootstrap 3, у меня есть два colummns, один с изображением, а другой - текст. Я пытаюсь разместить два бок о бок для просмотра на рабочем столе, но затем для небольших экранов (мобильный, планшет) текст должен упасть ниже изображения. Я пробовал разные поплавки и позиции css, но безуспешно.

Код:

     <div class="row"> 
          <h2>History</h2> 
           <div class="col-md-6"> 
            <img class="img-rounded" src="img/fldry-ban.png"/> 
             </div> 
         <div class="col-md-6"> 
          <p> text </p> 
           </div> 
            </div> 
             </div> 

Если у кого есть время, чтобы предоставить некоторые подробности о том, что CSS, я должен использовать, я бы весьма признателен. :-)

Answer 1

Теперь вы просто говорите браузер: «Эй, если я на устройстве среднего экрана (коллектив- мкр -6) давайте 6 из 12 блоков для отображения! "

Вам нужно добавить класс для мобильного зрения тоже:

Итак, мобильный браузер также знает, что он должен использовать все 12 блоков для отображения.

Для получения дополнительной информации о том, как использовать систему сетки бутстрапа, см. this.

Answer 2

попробовать это

<img class="img-rounded" src="img/fldry-ban.png" style="width:100%;"/> 


//or might be possible 


<style> 
    .custom > img{ 
    width:100%; 
    } 
</style> 
<div class="row"> 
    <h2>History</h2> 
     <div class="col-md-6 col-sm-6 col-lg-6 custom"> 
       <img class="img-rounded" src="img/fldry-ban.png"/> 
     </div> 
     <div class="col-md-6 col-sm-6 col-lg-6"> 
       <p> text </p> 
     </div> 
</div>