어떻게 부트 스트랩 3을 사용하여 요소의 표시 순서를 바꿀 수 있습니까

Question

누군가 제가이 부트 스트랩을 사용하여 어떻게 할 수 있을지 생각하려고합니다. 아무도 단서가 있습니까? 나는 어떻게 요소의 표시 순서를 바꿀 수 있는지 모르겠다. 나는 그 수레와 클리어로 놀고있는 것 같다. 도움이 필요하면 도와주세요. 반응 형 레이아웃을 위해 부트 스트랩 3을 사용하고 있는데, CSS를 사용하여 디스플레이 순서를 어떻게 바꿀 수 있습니까?

Answer 1

는 @skelly 바로 당신이 푸시를 사용하여 요소의 표시 순서를 변경하는 클래스를 당길 수있다. 이 클래스는 항상 올바른 솔루션을 제공하지 못합니다.

이것에 대해 많은 질문, 예를 들어 볼 수있다 : Need to be able to swap grid on mobile

당신이 모바일 (XS 그리드)에서 100 % 폭 행 (노란색 행)을 변경하려면 원인/태블릿보기 (MD 그리드) 당신은 부동 및/또는 밀고 당겨서 이것을 해결할 수 없습니다.

나는 또한 일부 매개 변수를 수정하지 않고 CSS로 thsi를 수행 할 수 없다고 생각합니다. 내가 다른보기 고정/알려져 당신의 요소 중 일부의 높이를 고려하면

, 내가 CSS 미디어 쿼리를 해결할 수 : http://bootply.com/85303

CSS :

@media (max-width: 768px) 
{ 
.yellow {margin-top:-60px;} 
.orange {margin-top:40px;} 
.col-xs-12{float:left;} 
} 
@media (min-width: 992px) and (max-width:1199px) 
{ 
    .col-md-12 {float:left;} 
    .darkgreen{float:right; margin-top:-60px;} 
} 
@media (min-width: 1200px) 
{ 
.blue{margin-top:-60px} 
} 

HTML을 :

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-xs-12" style="background-color:red;">&nbsp;</div> 
    </div> 

    <div class="row"> 
    <div class="orange col-lg-12 col-md-8 col-xs-12" style="background-color:orange;">&nbsp;</div> 
    <div class="yellow col-lg-8 col-md-12 col-xs-12" style=""> 
    <div class="row"> 
     <div class="col-lg-6 col-xs-12" style="background-color:yellow;height:40px;">1</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">2</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">3</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">4</div> 
    </div> 
    </div> 
    <div class="darkgreen col-lg-4 col-md-4 col-xs-12" style="background-color:darkgreen;">&nbsp;</div> 
    <div class="pink col-lg-8 col-md-12 col-xs-12" style="background-color:pink;">&nbsp;</div> 
    <div class="blue col-lg-4 col-md-12 col-xs-12" style="background-color:blue;height:40px;">&nbsp;</div> 
    </div> 

</div> 

일부 요소는 변경됩니다. (음수) 상단 여백을 추가하여 나는 그들의 신장을 알고있을 때만 이것을 할 수있다. 또한 float를 추가하는 것에주의하십시오. col-xs-12 및 col-xs-12 왼쪽.

높이를 모르는 실제 상황에서는 javascript (미디어 쿼리의 경우 respond.js 사용)를 계산하고 상단 여백을 추가 할 수 있습니다. 당신이 당신의 DOM을 조작 할 jQuery를 사용할 때이 당신에게 더 나은 솔루션을 제공 할 경우 나도 몰라, 참조 :`pull` 클래스를`push`를 사용 Add new row and changing column classes on resize