col-xs-12をcol-md-6に変更すると反応する

Question

私は容器を色が異なる2つのcol-md-6に分解しました。

もう1つは緑色で、もう1つは黄色です。

これらの2つの列を、緑色→黄色のようなグラデーションの色からなるcol-xs-12に変換しようとしています。

ジェイド：

.container-six 
.row 
    .col-xs-12.col-md-6.left 
    .col-md-6.right 

スタイラス：

.container-six 
height: 150px 
background-color: white 
.row 
    height:100% 
    .col-xs-12 
    height 150px 
    background: linear-gradient(to left,#ff8533,#99ccff) 
    .col-xs-12.col-md-6.left 
    background-color:#ff8533 
    .right 
    background-color:#99ccff 

Answer 1

あなたはCOL-XS-12に両方COL-MD-6のdivをマージすると、スタイルのプロパティと使用を削除メイン区域のプロパティ

背景：直線勾配（右、＃92af4c、＃fff707）;

Answer 2

達成したいのですか？実際の問題をいただきました！

/* Heart of the matter */ 
 
.row.two-colors { 
 
    background: -webkit-linear-gradient(0deg, yellow, green); 
 
    background: -moz-linear-gradient(0deg, yellow, green); 
 
    background:  -o-linear-gradient(0deg, yellow, green); 
 
    background:   linear-gradient(90deg, yellow, green); 
 
} 
 
@media (min-width: 992px) { 
 
    .row.two-colors > div:first-child { 
 
    background: yellow; 
 
    } 
 
    .row.two-colors > div:last-child { 
 
    background: green; 
 
    } 
 
} 
 

 
/* Decorations */ 
 
.row.two-colors > div { 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    min-height: 100px; 
 
    padding-top: 6px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row two-colors"> 
 
    <div class="col-md-6">First</div> 
 
    <div class="col-md-6">Second</div> 
 
    </div> 
 
</div>