는 부트 스트랩이 행 다음

Question

에 자식 DIV를 변경하면 내 HTML입니다 :

.row div{ 
    height: 100px; 
} 
.div1{ 
    background: blue; 
} 
.div2{ 
    background: red; 
} 
.div3{ 
    background: darkcyan; 
} 
.div4{ 
    background: cyan; 
} 

일반보기 에있는 그것의 확인이 함께 div4을 변경하는 것이 가능 : 여기

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-6 div1">DIV1</div> 
    <div class="col-sm-6 div2">DIV2</div> 
    <div class="col-sm-6 div3">DIV3</div> 
    <div class="col-sm-6 div4">DIV4</div> 
    </div> 
</div> 

내 CSS입니다 아래 그림처럼 모바일보기에서 div3

Answer 1

에 대한사용하여 미디어 쿼리 :

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-6 div1">DIV 1</div> 
    <div class="col-sm-6 div2">DIV 2</div> 
    <div class="col-sm-6 div3 col-sm-push-6">DIV 3</div> 
    <div class="col-sm-6 div4 col-sm-pull-6">DIV 4</div> 
    </div> 
</div> 

Answer 2

과 012의 색상을 바꿀 수 있습니다 당신은 HTML에서 다음과 같이 사용할 수 있습니다

.row div{ 
 
    height: 100px; 
 
} 
 
.div1{ 
 
    background: blue; 
 
} 
 
.div2{ 
 
    background: red; 
 
} 
 
.div3{ 
 
    background: darkcyan; 
 
} 
 
.div4{ 
 
    background: cyan; 
 
} 
 

 
@media(max-width:767px){ 
 
    .div3{ 
 
    background: cyan; 
 
    } 
 
    .div4{ 
 
    background: darkcyan; 
 
    } 
 

 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 div1"></div> 
 
    <div class="col-sm-6 div2"></div> 
 
    <div class="col-sm-6 div3"></div> 
 
    <div class="col-sm-6 div4"></div> 
 
    </div> 
 
</div>

min-width: 767px 모바일