반응이있는 CSS로 이미지가 첫 번째로 표시됩니다.

Question

부트 스트랩 'featurette'기능을 사용하고 있습니다. 페이지에는 왼쪽에 텍스트가 있고 오른쪽에 이미지가 있습니다. 브라우저 크기를 줄이면 위쪽에 텍스트가 있고 맨 아래에 이미지가있는 상태에서 서로 겹쳐서 표시됩니다. 이미지를 프리스트 (frist)로 만들고 그 아래에 글씨를 쓰도록 어떻게 변경합니까? 이 기능 부분은 당신이 크기를 조정할 때 무슨 뜻인지 볼이 발견되면

광고의 예는 여기 http://getbootstrap.com/examples/carousel/

입니다.

내가 생각할 수있는 유일한 것이지만 작동하지 않는 것으로 플로트 위치를 변경해 보았습니다.

P.s 그냥 분명히하기 위해, 나는 756px (또는 그 크기가 무엇이든)가 넘을 때도 같은 장소를 원하지만 위의 예에서 크기가 바뀌면 이미지를 맨 위에 놓기를 원합니다.

Answer 1

둘 다 컨테이너에 display : flex 속성을 사용해야하며 요소의 order 속성을 사용하는 것이 아래에 나와 있습니다. 요소의 순서를 변경하고 살펴보십시오.

.elements-container{ 
 
    background: #000; 
 
    width: 100%; 
 
    height: 500px; 
 
    display: flex; 
 
} 
 
.text-box{ 
 
    order: 2; 
 
    width: 200px; 
 
    height: 200px; 
 
    color: #ffffff; 
 
    background: #ff0000; 
 
    display: block; 
 
} 
 
.image-box{ 
 
    order: 1; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: block; 
 
}

<div class="elements-container"> 
 
    <div class="text-box">This is text</div> 
 
    <div class="image-box"><img src="http://lorempixel.com/200/200" /></div> 
 
</div>