ブートストラップは、ここで行

Question

に子div要素を変更することが私のhtmlです：ここでは

<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です：

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

ノーマルビューにおけるそのOKがでDIV4を変更することが可能です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の色を交換することができますモバイルmin-width: 767pxあなたは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>