div를 모바일 모드에서 하단에 배치하는 방법은 무엇입니까?

.preview img { 
 
    width: 113px;height: 113px;margin-bottom: 6px; 
 
}

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="col-md-6 col-sm-6 col-xs-12"> 
 
    <div class="row"> 
 
     <div class="col-md-3 col-xs-3 preview"> 
 
\t <img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg"> 
 
\t <img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg"> 
 
\t <img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg"> 
 
    </div> 
 
    <div class="col-md-9 col-xs-9"> 
 
\t <img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg" > 
 
    </div> 
 
</div>

나는 왼쪽에있는 제품의 미리보기 이미지에 대한 사업부 및 주요 미리보기의 또 다른 사업부가있다. 내가 원하는 것은 왼쪽의 미리보기 이미지가 모바일 모드의 기본 미리보기의 맨 아래에 있다는 것입니다. 할 일이나 조언을 해줄 수 있습니까?

출처

2017-11-22 J.Doe

당신이 그 이상 CSS가 있습니까는? 요소를 왼쪽으로 어떻게 배치하고 있습니까? – A61NN5

col-md를 사용하여 미니 사진을 배치했습니다. 그리고 나는 제품 설명에 대한 오른쪽에 다른 div가 있습니다. –

CSS 격자 또는 flexbox를 사용하여 요소를 배치하려고 시도 할 수 있었는데 대신 특정 중단 점에서 위치를 변경하거나 col-md를 변경할 수있었습니다 -3 to col-lg-12 그리고 그것들은 스택을 만드는 컬럼의 전체 너비를 사용할 것입니다. – A61NN5

이 작업을 수행하려면 미디어 쿼리에 따라 flex-direction 특성을 변경할 수 있습니다.

내가 부트 스트랩을 사용하기 때문에 잠시 였지만, 여기에 바닐라 CSS의 예는 다음과 같습니다

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
@media only screen and (max-width: 750px) { 
 
    .wrapper { 
 
    flex-direction: column-reverse; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div>links</div> 
 
    <div>rechts</div> 
 
</div>

출처

2017-11-22 02:50:02 SourceOverflow

div를 모바일 모드에서 하단에 배치하는 방법은 무엇입니까?

답변

관련 문제