부트 스트랩 열 순서 3

Question

부트 스트랩 3의 열 순서를 바꾸는 방법은 무엇입니까?

바탕 화면보기에서

[A - long block] 
[C - long block] 
[B - long block] 

HTML 코드

<div class="row"> 
    <div class="col-sm-8">A</div> 
    <div class="col-sm-4">B</div> 
    <div class="col-sm-12">C</div> 
</div> 

Answer 1

HTML 태블릿 및 모바일보기에서

[A - 60% block] [B - 40% block] 
[C - full block] 

:

<div class="container"> 
    <div class="row"> 
    <div id="a" class="col-md-7 col-sm-12 col-xs-12">A</div> 
    <div class="reorder-sm"> 
     <div id="b" class="col-md-5 col-sm-12 col-xs-12">B</div> 
     <div id="c" class="col-md-12 col-sm-12 col-xs-12">C</div> 
    </div> 
    </div> 
</div> 

CSS :

@media (max-width: 991px) { 
    .reorder-sm { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 

    direction: rtl; 
    } 

    .reorder-sm > [class*="col-"] { 
    -webkit-transform: rotate(-180deg) translate(0,300%); 
    -moz-transform: rotate(-180deg) translate(0,300%); 
    -ms-transform: rotate(-180deg) translate(0,300%); 
    -o-transform: rotate(-180deg) translate(0,300%); 
    transform: rotate(-180deg) translate(0,300%); 

    direction: ltr; 
    } 
} 

은 완벽한 솔루션을위한 fiddle를 참조하십시오. this similar question도 도움이 될 수 있습니다.

대안 솔루션 : 최고의 StackOverflow의 실천의 일환으로

<div id="a" class="col-md-7 col-sm-12 col-xs-12">A</div> 
<div id="b1" class="col-md-5 hidden-sm hidden-xs">B</div> 
<div id="c" class="col-md-12 col-sm-12 col-xs-12">C</div> 
<div id="b2" class="visible-sm visible-xs col-sm-12 col-xs-12">B</div>