JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="heightBig">asas</div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="heightSmall">asasas</div>
    </div>
</div>

CSS

.heightBig{height:100px;background-color:red;}
.heightSmall{height:50px;background-color:green;}

@media (min-width: 768px){
.row{
    display:table-row;
}    
.col-sm-6{
        display:table-cell;
        float: none;
}
}

@media (max-width: 768px){
    .col-sm-6{
        float:left;
        width:100%;
}
}