부트 스트랩으로 div 재정렬하기

Question

저는 방금 부트 스트랩으로 작업하고 모바일 및 웹을위한 반응 형 사이트를 만들기 시작했습니다. 이것은 내가 만들려고하는 디자인입니다.

나는 순서를 변경하려면 3, 4, 5를 원하고이 문제가 보인다. 나는 이와 비슷한 코드를 사용했다 :

<div class="row"> 
    <div class="col-push-sm-12 col-xs-12"> 
     3 
    </div> 
    <div class="col-pull-sm-12 col-xs-12"> 
     4 
    </div> 
</div> 

그러나 열은 바운드를 벗어나서 행을 전환하지 않는다.

일부 부트 스트랩 hax를 사용하여이를 수행 할 수 있습니까 아니면 화면 크기에 따라 숨기거나 표시하는 여러 div를 만들어 올바른 방법입니까?

Answer 1

이렇게하면됩니다.

DEMO

HTML

<div class="container outer"> 
<div class="row "> 
    <div class="col-md-6 staticPos"> 
     <div class="cont1">1</div> 
     <div class="cont2">2</div> 
     <div class="cont3">3</div> 
     <div class="cont4">4</div> 
     <div class="cont5">5</div> 
    </div> 
</div> 
</div> 

CSS

.cont1 {background: green} 
.cont2 {background: purple} 
.cont3 {background: red} 
.cont4 {background: blue} 
.cont5 {background: yellow} 
.staticPos {position: static} 
.outer {position: relative} 
.cont2 {position: absolute; right: 15px; top: 0; width: calc(50% - 30px)} 
.cont3 {position: absolute; top: 100%; left: 15px; width: calc(50% - 30px)} 

@media (max-width: 992px) { 
    .cont2, .cont3 {position: static; width: auto;} 
} 

Answer 2

그것을 단지 CSS 및 솔루션 당신이 줄을 사용하여 요소의 순서를 변경하는 간단한 방법이 있기 때문에 부트 스트랩없이 없다 그리드 시스템은 이러한 솔루션과 호환되지 않습니다.

만 사용 supported by the newest browsers 인 새로운 CSS flexbox 위치 확인 시스템을

• Use display: table-*-group to reorder는 (단 최대 세 가지 요소로 작동하고, 기존 브라우저에서 지원 flacky입니다).