html - How to reorder rows in Bootstrap 3 -

firstly, saw many threads question here , here. problem not solved!

i need reorder 2 rows. have :

html :

<div class="row first-row">   <div class="col-xs-6">col-1</div>   <div class="col-xs-6">col-2</div> </div> <div class="row second-row">   <div class="col-xs-6">col-3</div>   <div class="col-xs-6">col-4</div> </div> 

demo

i need reorder first-row second-row.

any appreciated.

if have div wrapping rows can use this:

.wrapper {    width: 100%;    display: table;  }    .first-row {    background: blue;    display: table-row-group;  }    .second-row {    background: red;    display: table-header-group;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="wrapper">    <div class="row first-row">      <div class="col-xs-6">        col-1      </div>      <div class="col-xs-6">        col-2      </div>    </div>    <div class="row second-row">      <div class="col-xs-6">        col-3      </div>      <div class="col-xs-6">        col-4      </div>    </div>  </div>