One part of the sidebar above and a second part below the main content on small displays

[kuzmandi]

Problem: I have a two-column layout with a main content column and a sidebar column on the right. The sidebar column contains a TOC (above) and other elements (categories, tags, blog stuff). On small screens I want the TOC to be displayes above the main content and the rest of the sidebar below it.

This is a solution for using Bootstrap (and explains in more detail what I mean in detail):
https://stackoverflow.com/a/57528301

Can this problem also be solved with Cirrus?

[Spiderpig86]

Hey @kuzmandi,

This should be what you're looking for. Feel free to try this out in Cirrus playgrounds.

<div class="content">
	<div class="row u-block-md">
		<div class="col-sm-8 u-pull-left">Main Content
			<p>3 wolf moon retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica.
				Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel
				Brooklyn literally small batch, mumblecore
				PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral fap cronut leggings squid
				chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag
				normcore, Helvetica Williamsburg
				sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
		</div>
		<div class="col-sm-4 u-pull-right" style="order: -9999">Above Main Content or Side (X)</div>
		<div class="col-sm-4 u-pull-right">Below Main Content or Side</div>
	</div>
</div>

Please reopen if you have any other questions!