Reorder columns differently in mobile and tablet - css

Question

I had an issue with some positioning of four divs. these four divs are in two columns. The problem that I had was that when the top div on the right side became larger (height wise) than the two divs on the left side combined, the bottom div on the right side slid over to the left side underneath the two on the left side
My solution (with the help of a wonderful stack overflow all-star) was implementing a col-sm-offset-8 on that third div.
It was worked out here bootstrap, 4 divs, 2 columns. One column not floating right
This worked.....but. The result of this was that when the top div on the right side is now smaller, it does not respond (by respond I mean it no longer is positioned right underneath the top div on the right side).
<div class="col-xs-12 col-sm-8 start">Start ride For</div>
<div class="col-xs-12 col-sm-4 pull-right open">Open ride</div>
<div class="hidden-xs hidden-sm"></div>
<div class="col-xs-12 col-sm-8 conditions ">rides We have</div>
<div class="col-xs-12 col-sm-4 col-sm-offset-8 pull-right hours">Hours of Operation</div>
.start { height: 50px; background: #fcc; }
.open { height: 250px; background: #fdb; }
.hours { height: 50px; background: #ffb; }
.hidden { height: 50px; }
.conditions { height: 150px; background: #cfc; }
I have been tinkering with this issue on a pen as well.
http://codepen.io/KDweber89/pen/LVddKK?editors=110
So...basically with my four divs, I ALWAYS want the 'hours of operation' div to be directly below the 'open ride' div, regardless of what size the 'open ride' div is. (the reality is with the real work I am doing, the 'open ride' div often changes sizes based off of the user)

Answer 1

Wrap the entire content inside a div and execute the media query on max-width: 768px which is the break point for the change of order currently. Inside the media query, Use a flexible box property to reorder them.
.start {
height: 50px;
background: #fcc;
}
.open {
height: 650px;
background: #fdb;
}
.hours {
height: 50px;
background: #ffb;
}
.hidden {
height: 50px;
}
.rides {
height: 150px;
background: #cfc;
}
#media (max-width: 768px) {
.flex-wrap {
display: flex;
flex-direction: column;
}
.open {
order: 3;
}
.hours {
order: 4;
}
}
#media (max-width: 480px) {
.open {
order: 2;
}
.hours {
order: 4;
}
.rides {
order: 3;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-wrap">
<div class="col-xs-12 col-sm-8 start">Start Ride</div>
<div class="col-xs-12 col-sm-4 pull-right open">Open ride</div>
<div class="hidden-xs hidden-sm"></div>
<div class="col-xs-12 col-sm-8 rides ">Rides We have</div>
<div class="col-xs-12 col-sm-4 col-sm-offset-8 pull-right hours">Hours of Operation</div>
</div>