Responsive Info Sidebar

Sidebar layouts have always been popular. In HTML5, the <aside> element is designed for this purpose. It can be used for things like latest news, blog post links or links to other pages or articles.
The sidebar is a prominent feature in all those nasty Wordpress sites where it can stretch way longer down the page than the content section it is paired with.
This widget uses CSS to limit the height of the sidebar to that of the main content. All the extra content is hidden and can be scrolled as indicated by the icon in the sidebar's header.
Layout Switch
When the page is viewed on a tablet or mobile phone, the sidebar switches position to below the content area, extends to full height and can then be swiped. The break point at which this happens can be set in the widget settings panel.
The grid layout makes this really easy. The main section has a width of 1 fractional unit and is placed in column 1. The sidebar has a width set in pixels and is placed in column 2.
Below the break point, the grid column layout becomes 1 fr and the sidebar becomes full width and is placed in row 2. All this is done with just a couple of lines of CSS.