How to swap first div with last div on mobile version?

I have divs as follows.

<div class="row">
  <div class="col-sm-12" id="first-row"></div>
  <div class="col-sm-12" id="second-row"></div>
  <div class="col-sm-12" id="third-row"></div>
  <div class="col-sm-12" id="fourth-row"></div>
</div>

How can i swap first-row div with fourth-row div on mobile devices? Is it possible to do with just css? What could be best stragety to achieve this, I can do this with javascript, but wanted to know whether it is possible with just css. I am using bootstrap 3

Expected result on mobile

<div class="row">
    <div class="col-sm-12" id="fourth-row"></div>
    <div class="col-sm-12" id="second-row"></div>
    <div class="col-sm-12" id="third-row"></div>
    <div class="col-sm-12" id="first-row"></div>
</div>


If you use flexbox on the row, you can use the order property to do this for you. (you can use media queries for adding display: flex to target mobile devices)

See how the positions of fourth-row and first-row are swapped in the demo below:

div.row {
  display: flex;
  flex-direction: column;
}

[id$='-row'] {
  order: 2;
}
#first-row {
  order: 3;
}
#fourth-row {
  order: 1;
}
<link target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-sm-12" id="first-row">1</div>
  <div class="col-sm-12" id="second-row">2</div>
  <div class="col-sm-12" id="third-row">3</div>
  <div class="col-sm-12" id="fourth-row">4</div>
</div>

Use Flex property to swap elements. Here is an article about it Reverse Elements Order.

Unable to demonstrate the mobile only part, so please use the below CSS.

@media only screen and (min-width : 480px) {
    .row { display: flex; flex-direction: column-reverse; }
}
$('button').on('click', function(){
 $('.row').toggleClass('row-reverse');
})
.row-reverse { display: flex; flex-direction: column-reverse; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-12" id="first-row">first</div>
  <div class="col-sm-12" id="second-row">second</div>
  <div class="col-sm-12" id="third-row">third</div>
  <div class="col-sm-12" id="fourth-row">fourth</div>
</div>
<button>reverse/unreverse</button>

If you just want to change the look in different screen sizes, you can use default Bootstrap grid ordering:

https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

Might be easier to see the responsive result here: https://codepen.io/anon/pen/vJQmXq

<link target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-12 col-md-3 col-md-push-9" id="fourth-row">4</div>
  <div class="col-sm-12 col-md-3" id="second-row">2</div>
  <div class="col-sm-12 col-md-3" id="third-row">3</div>
  <div class="col-sm-12 col-md-3 col-md-pull-9" id="first-row">1</div>
</div>

Here you go with a solution using jQuery https://jsfiddle.net/68bfxozm/1/

My assumption is mobile width will be less than 500px.

Hope this will help you.