부트 스트랩의 행 재정렬 3

두 개의 div 행이 있습니다. 바탕 화면에있는 것이부트 스트랩의 행 재정렬 3

이 그것을 할 수있는 방법이 있나요 B

처럼

및 모바일 그것이 있어야

B 같아야합니다 부트 스트랩 3의 푸시 푸시 기능은 무엇입니까?

아래의 데모에서는 파란색과 빨간색 스트립이 표시됩니다.

바탕 화면 빨간색 줄무늬가 맨 위에 있어야합니다. 파란색 줄무늬가 맨 위에 있어야합니다.

Demo

HTML

<div class="row"> 
    <div class="col-md-12 row1 clearfix" > 
    <div class="col-md-3 col-xs-6 col-md-push-6">A</div> 
    <div class="col-md-3 col-xs-6 col-md-push-6">B</div> 
    <div class="col-md-6 col-xs-12 col-md-pull-6">C</div> 
    </div> 
    <div class="col-md-12 row2 clearfix">D</div> 
</div>

CSS

.row1 { 
    background:red; 
    } 

    .row2 { 
    background:blue; 
    }

출처

2014-06-11 tomalex

나에 따르면 그 조금 PILL/PUSH 클래스를 사용하여 어렵다. 동일한 기능을 위해 프로젝트에서 숨겨진/보이는 클래스를 사용했습니다.

JSFiddle 링크 :http://jsfiddle.net/Sharan_thethy/XRdt8/

은 내가 당신을 도울 바랍니다.

CODE :

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <title>tast exp</title> 
    <link href="bootstrap.css" rel="stylesheet" type="text/css"> 
<style> 
.row1 { 
    background:red; 
} 

.row2 { 
    background:yellow; 
} 

</style> 

    </head> 


<body> 
<div class="row"> 
<div class="col-md-12 row2 visible-xs">yellow box top</div> 
    <div class="col-md-12 row1 clearfix" > 
     <div class="col-xs-6">red box left</div> 
     <div class="col-xs-6">red box right</div> 
    </div> 
    <div class="col-md-12 row2 hidden-xs clearfix">yellow box bottom</div> 
</div> 

</body> 
</html>

출처

2014-06-11 09:10:58 Sharanpreet

부트 스트랩의 행 재정렬 3

답변

관련 문제