중첩 된 부트 스트랩 그리드 - 레이아웃 문제

Question

부트 스트랩 프레임 워크와 관련하여 고민하고 있습니다.
왼쪽에 이미지가 있고 오른쪽에 텍스트와 다른 요소가있는 간단한 상자를 만들고 싶습니다.
하지만 작은 화면에 표시 될 때 문제가 발생합니다.

This is my current code.

<div class="col-md-8" style="margin-top: 3px;"> 
      <div class="feed-box"> 
       <div class="row"> 
        <div class="col-md-1"> 
         <img style="max-width: 52px;" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=250"> 
        </div> 
        <div class="col-md-11"> 
         <div class="row"> 
          <p><a href="#">John Doe</a> announced something</p> 
         </div> 
         <div class="row"> 
          <p> 
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column. 
          </p> 
         </div> 
         <div class="row"> 
          <a href="#">Comment</a> 
          <a href="#">Share</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

나는 이미지를 통해 설명합니다 :

작은 화면 (나쁜) :
데스크톱 (그것은이 패딩 여기에 중요하지 않습니다 괜찮습니다)

m (작은 화면에서) 만들려고 :

또한 예 ... 작은 화면의 COLS를 지정해야합니다

Answer 1

에 대한 넣어 필요가 없습니다

media queries을 사용하여 작은 화면의 요소 스타일을 지정합니다.

예를 들어 확인이 fiddle (차이를 볼 크기를 조정)

CSS 사용

@media (max-width: 800px){ 
    .feed-box .col-md-1{ 
     float:left; 
    margin-bottom:8px; 
    } 
    .feed-box .col-md-11{ 
     margin-top:15px; 
    } 
} 

Answer 2

- 당신이 MD

<div class = "row"> 
    <div class = "col-sm-1"> 
    </div> 
    <div class = "col-sm-11"> 
    </div> 
</div>