부트 스트랩 열의 순서 문제

Question

웹 개발을 배우고 있으며 freeCodeCamp 할당을위한 공물 페이지를 작성하려고합니다. 내 전체 페이지를 여기에서 볼 수 있습니다 : https://codepen.io/Art365/pen/ZKxPQj 이상적으로 두 번째 줄로 무엇을하고 싶습니까?

뷰포트가 큰 경우 이미지가 왼쪽에 있고 텍스트가 오른쪽에 있습니다. 뷰포트가 작 으면 이미지가 하단에 표시되고 텍스트는 맨 위에 표시됩니다. 나는 매우 비슷한 질문을하기 전에 여기에 요청을받은 나는 이것처럼, 풀 왼쪽 및 당기 권리를 사용하는 몇 가지 제안 된 솔루션을 시도 실현

<div class="row"> 

    <div class="col-lg-6 col-lg-push-6"> 
    <div class="text-content"> 
     <p>text content</p> 
    </div> 
    </div> 

    <div class="col-lg-6 col-lg-pull-6"> 
    <img id="pic2" src="http://www.thefamouspeople.com/profiles/images/karl-landsteiner-3.jpg" alt="Landsteiner" /> 
    </div> 

</div> 

: 여기

은 관련 코드입니다 https://stackoverflow.com/a/20171474/7143798 그러나, 내 경우에는 html로 처음 표시하지 않으면 이미지를 왼쪽에서 볼 수 없습니다 (큰보기). 그러나 html로 처음 입력하면 작은 화면 상단에 나타납니다.

Answer 1

CodePen은 부트 스트랩 4.0.0을 사용하므로 .push-lg-6 및 .pull-lg-6을 사용해야합니다. 부트 스트랩 3은 .col-*-push-* 클래스를 사용합니다.

Answer 2

밀고 당길 필요가 없습니다. 중단 점을 사용하면됩니다.

<div class="row"> 
    <div class="col-sm-12 col-md-6 col-lg-6"> Your image here </div> 

    <div class="col-sm-12 col-md-6 col-lg-6"> 
    <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 
    </p></div> 
</div> 
<div class="row"> 
    <div class="col-sm-12 col-md-6 col-lg-6"> Your image here </div> 

    <div class="col-sm-12 col-md-6 col-lg-6"> 
    <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 
    </p></div> 
</div> 

이

은 LG와 중간 중단 점에서 그들에게 나란히 스택, 그리고 작은 뷰포트에 위/아래 레이아웃을 강제로 전체 폭의 컬럼에 휴식 것입니다. 기본적으로 col-xs- *는 12 열이므로 XS 중단 점을 포함 할 필요가 없습니다.