Change order of widgets on small screens

[myersbr2]

I started with the Lifestyle Pro theme but have made so many changes it is hardly recognizable as such. I'm finalizing the mobile layout for smaller screens and I want to display certain widgets above the content when pixel width dictates the layout goes to a single column. In my right sidebar I currently have About Me, Search and a few ads. I want the search widget to appear above the content when it goes to a single column layout. Specifically and only on the home page, I want the about me to also go above the content. Using CSS, I can get the entire sidebar to show up first, but I only want specific widgets to show up above the content. How can I do this?

Current CSS to move everything in the sidebar above the content is:

.content-sidebar-wrap {display:table;}
.content {display:table-footer-group; float: none;}
.sidebar {display:table-header-group; float: none;}
}

http://local install for now

[myersbr2]

Update: I have used CSS to hide some of the widgets I don't want to display on small screens. I guess I could create additional widgets, place them in the updated page location for different screen sizes and then use CSS to selectively hide/display them based on screen size, but that seems very inefficient. Is there a better way?

[Author]

Posts