화면 크기에 따라 이미지와 텍스트를 정렬하는 방법은 무엇입니까?

Question

나는 부트 스트랩을 처음 사용하여 도움을 구합니다.

내 코드에서 볼 수있는 것처럼 4 개의 열로 나뉘어 진 텍스트와 이미지가 있습니다. 미디어 쿼리 (CSS에 표시된대로)를 사용하여 화면 크기에 따라 정렬을 설정했습니다. 하지만 창 크기를 조정하고 태블릿보기의 화면 크기에 도달하면 (스크린 샷 1을 확인하십시오) 텍스트가 너무 커서 이미지가 텍스트에 너무 가깝기 때문에 소리가 지저분 해 보입니다. 따라서이 화면 크기 (예 : 태블릿보기)에서 열을 세로로 정렬하려면 (예 : 스크린 샷 2), 왼쪽에 이미지를 놓고 텍스트와 머리글은 이미지 옆에 놓아야합니다. 하지만 모든 것이 모바일보기 (스크린 샷 3 번 확인)에서 이미 나에게 완벽하기 때문에 모바일보기를 방해해서는 안됩니다.

여전히 내 질문에 충분히 명확하지 않으면 다음 템플릿 http://www.templatemonster.com/demo/58152.html

그들은 내가 갖고 싶은 "일 팀"의 섹션을 확인하시기 바랍니다.

도와 드리겠습니다.

감사합니다.

<div class="jumbotron"> 
<div id="wrapper"> <!--Wrapper--> 
    <div class="container"> <!--Container--> 
     <div class="row" style="padding-bottom: 40px;"> 
      <div class="col-md-12" align="center"> 
       <h1>Meet Us</h1><hr class="style1"></hr> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-sm-3"> 
       <img src="images/11.jpg" class="img-circle img-responsive" width="180"/> 
      </div> 
      <div class="col-sm-3"> 
       <h2 class="style1">Shaikh Obaidullah</h2> 
       <h3 class="style1">CEO/Web Developer</h3> 
       <hr class="style2"></hr> 
       <p class="style1">I will be taking care of product development stages such as Requirements, Development, Functionality, Usability, and Technical Support.</p> 
      </div> 
      <div class="col-sm-3"> 
       <img src="images/12.jpg" class="img-circle img-responsive" width="180"/> 
      </div> 
      <div class="col-sm-3"> 
       <h2 class="style1">Ovais M. Shaikh</h2> 
       <h3 class="style1">Graphic Designer</h3> 
       <hr class="style2"></hr> 
       <p class="style1">I will spice up your product with creative and unique designs so that you get the most attracted product in the end.</p> 
      </div> 
     </div> 
    </div> <!--Container-END--> 
</div> <!--Wrapper-END--> 

.jumbotron { 
    background-image: url('../images/13.jpg'); 
    background-attachment: fixed; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    margin-bottom: 0px; 
} 

.img-responsive { 
    margin: 0 auto; 
} 

#wrapper { 
    background-color: #FFF; 
    background: rgba(0,0,0,.7); 
    color: #FFF; 
    padding-bottom: 40px; 
} 


hr.style1 { 
    margin-bottom: 30px; 
    margin-top: 30px; 
    width: 100px; 
    border-top: 2px solid #8884bc; 
} 


@media (min-width: 768px) { 
h2.style1{ 
    color: #8884bc; 
    text-align: left; 
    margin-bottom: 0px; 
} 

h3.style1{ 
    text-align: left; 
    margin-top: 10px; 
} 

hr.style2 { 
    margin-bottom: 50px; 
    margin-top: 50px; 
    margin-left: 0px; 
    width: 100px; 
    border-top: 2px solid #8884bc; 
} 

p.style1{ 
    font-size: 20px; 
    text-align: left; 
    color: #eee; 
} 

.jumbotron{ 
    margin-bottom: 0px; 
} 
} 

@media only screen and (max-width:768px) { 
hr.style2 { 
    margin-bottom: 30px; 
    width: 100px; 
    border-top: 2px solid #8884bc; 
} 

h2.style1{ 
    color: #8884bc; 
    text-align: center; 
    margin-bottom: 0px; 
} 

h3.style1{ 
    text-align: center; 
    margin-top: 5px; 
    font-size: 20px; 
} 

p.style1{ 
    margin-bottom: 80px; 
    font-size: 16px; 
    text-align: center; 
    color: #eee; 
} 
} 

Answer 1

내가 분명히 당신을 이해한다면 나도 몰라. 하지만 난 당신의 코드는 다음과 같이해야한다는 생각 : 오른쪽, 및 왼쪽 플로트 :

<div class="row"> 
    <<div class="col-md-5">  
    <div class="left"> 
     <img> 
    </div> 
    <div class="right"> 
     <h1> 
     some text 
     </h1> 
    </div> 
    </div> 

    <<div class="col-md-5">  
    <div class="left"> 
     <img> 
    </div> 
    <div class="right"> 
     <h1> 
     some text 
     </h1> 
    </div> 
    </div> 
</div> 

및 클래스 권리, 플로트해야합니다 왼쪽; , amd col-md-5는 display 여야합니다 : inline-block;