Изменение цвета col-xs-12 до col-md-6

Question

У меня есть контейнер, разбитый на два col-md-6 разных цветов.

Предположим, что один зеленый, другой желтый.

Я пытаюсь преобразовать эти два столбца в один col-xs-12 с градиентом цвета, исходящим из, как вы ожидали, зеленый -> желтый.

Джейд:

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

Stylus:

.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-мкр-6 ДИВ в Col-хз-12 затем удалить свойство стиля и использования свойство для главного div

background: linear-gradient (справа, # 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>