부트 스트랩 - 열 순서 변경

Question

부트 스트랩으로 작업하고 있으며 열의 순서가 sm보기에서만 변경되도록하고 싶습니다. 저 부트 스트랩에는 당기고 푸시하는 방법이 있지만이 문제가 있습니다.

데스크탑

A | B | C | D

태블릿

A | D

B | C

모바일

A | B

C | D 해주기

내 코드 :

<div class="container"> 
<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-3">A</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">B</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">C</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">D</div> 
</div> 
</div> 

Answer 1

크리스티안은 스트랩의 당기고 밀어 방법은 가로 열을 교환하는데 사용될 수 있지만, 수직된다. 수직으로 바꾸려면 CSS를 사용해야합니다.

비슷한 질문이 있으며 this link이 요구 사항을 충족하는 데 도움이되기를 바랍니다.

Answer 2

감사합니다.하지만 더 나은 해결책을 찾았습니다. 플렉스 사용.

이 내가 밀어 넣기를 시도하고 당겨 전에 내 작업 예 :

.row > div { 
 
    border:solid 1px gray; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
@media (min-width: 768px) and (max-width: 991px) { 
 
    #col-a { 
 
    order:1; 
 
    } 
 
    #col-b { 
 
    order:3; 
 
    } 
 
    #col-c { 
 
    order:2; 
 
    } 
 
    #col-d { 
 
    order:4; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-a">A</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-b">B</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-c">C</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-d">D</div> 
 
    </div> 
 
</div>