JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="col-lg-8 col-md-8 col-sm-12 col xs-12">
    <div class="col-lg-7 col-md-7 col-sm-7 col xs-12 red">
        1
    </div>
    <div class="col-lg-5 col-md-5 col-sm-5 col xs-12 yellow">
        2
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 col xs-12 green">
        3
    </div>
</div>

CSS

.red {
    background-color: red;
    order: 3;
}

.yellow {
    background-color: yellow;
    order: 1;
}

.green {
    background-color: green;
    order: 2;
}

.blue {
    background-color: blue;
}

* {
    padding: 0 !important;
}

@media (max-width: 767px) {
div:first-child, div:first-child > div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column;
    flex-flow: column;
    height: 100px;
    width: 100%;
}
}