Changing column position in rows I've this layout:

&lt;div class="row1"&gt;
    &lt;div class="col-sm-4 col-md-4" id="col1"&gt;&lt;/div&gt;
    &lt;div class="col-sm-4 col-md-4" id="col2"&gt;&lt;/div&gt;
    &lt;div class="col-sm-4 col-md-4" id="col3"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row2"&gt;
    &lt;div class="col-md-12 col-xs-12" id="col4"&gt;&lt;/div&gt;
&lt;/div&gt;


This is perfect on large-small screen. But not adapt for what i want to displayed on mobile.
Displayed:

col1 col2 col3

 col4      


How can i get this: col3 and col4 reodered on mobile. 
Like this:

col1 col2 col4

 col3       


So col4 change from row2 -> row1, col3. And cal3 get from row1 -> row2, col4. Just on mobile.
Note: This is to be applied just on mobile/small screen. For the display is fine for midle and large screen.
If you're able to use a flex container for your divs all in the same div, you might try using the order property in a media query for smaller screens. It lets you select the order of elements. I've done a fiddle here.

Here's the CSS I used.

.row1 {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}
@media (max-width: 767px) {
  #col1 {order: 1;}
  #col2 {order: 2;}
  #col3 {order: 4;}
  #col4 {order: 3;}
}