Bootstrap Responsive Column Layout Stacking Columns

I'm building a grid structure and I have changed the bootstrap container classes to new dimension which is working fine. I am currently trying to achieve the layout below and have

Solution 1:

And something like this?

<divclass="row"><divclass="col-sm-12 col-md-6"><divclass="col-sx-6 col-sm-6 col-md-6  boats-row   "></div><divclass="col-sx-6 col-sm-6 col-md-6 home-row-red"></div><divclass="col-sx-6 col-sm-6 col-md-6 home-row-blue"></div></div><divclass="col-md-6 col-sm-12 home-row-big"></div></div>