I'm looking to create a menu bar that aligns on the right side of the page and allows the main content to flow underneath it. While using float:right; in CSS accomplishes this for desktop viewing, on mobile devices the menu bar appears above the content rather than below it. I've experimented with various methods like flex tables and reorder without success. Any guidance on how to resolve this would be highly appreciated.
.content {
display: block;
background: #f5f5f5;
width: 100%;
}
.information {
background: #ddd;
padding: 10px;
width: 100;
display: block;
}
.menu {
width: 100%;
display: block;
}
.side-info {
display: block;
text-align: center;
font-size: 13px;
padding: 10px 20px;
}
.colour-1 {
background: pink;
}
.colour-2 {
background: lightblue;
}
@media all and (min-width: 992px) {
.content {
max-width: 1200px;
background: #ccc;
margin: 0 auto;
}
.information {
width: auto;
}
.menu {
width: 250px !important;
display: block;
float: right;
}
}<section class="content">
<aside class="menu">
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
<div class="side-info colour-1">Menu Item </div>
<div class="side-info colour-2">Menu Item </div>
</aside>
<div class="information">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis tristique enim, ut laoreet est maximus non. Duis cursus, ligula quis porta scelerisque, nunc nunc gravida neque, faucibus varius erat est non ipsum. Nunc vitae risus maximus, luctus turpis nec, facilisis justo. Pellentesque fermentum, nulla nec accumsan luctus, elit dolor tincidunt dui, vel imperdiet tortor massa et magna. Duis volutpat suscipit luctus. Sed sit amet nulla mollis, volutpat diam eu, lacinia velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec lobortis urna ante, imperdiet ornare diam aliquet in. Vestibulum quis purus ultricies, pretium nulla id, maximus risus. Nunc volutpat, leo vitae imperdiet consectetur, elit odio ornare ipsum, sed fringilla diam lectus vel purus. Aenean quis diam sem. Donec quis tincidunt neque, quis eleifend felis. In hac habitasse platea dictumst. Praesent scelerisque, sapien vitae condimentum vestibulum, neque tellus tempus erat, et interdum arcu velit vel ipsum.</p>
<p>In blandit sed augue nec hendrerit. Curabitur sed finibus mi. Donec in laoreet sapien, ac blandit odio. In hac habitasse platea dictumst. Donec vel lorem vitae lacus placerat facilisis. Etiam tortor dui, consequat sit amet lorem eu, lacinia eleifend tellus. Sed tristique tincidunt iaculis. Suspendisse laoreet augue leo, eu hendrerit neque pellentesque sed.</p>
<p>Aliquam a suscipit ante. Sed fermentum eros a libero pellentesque imperdiet. Maecenas bibendum lobortis scelerisque. Sed nisi arcu, tristique sit amet lectus sit amet, suscipit gravida ex. Ut ut tortor cursus nulla lobortis posuere non vitae libero. Aliquam vitae neque ornare, tincidunt nibh ac, accumsan magna. In ut malesuada sem. Fusce non porttitor ante.</p>
<p>Nulla at leo eget eros congue aliquet. Vivamus tincidunt erat ligula, sed tincidunt purus ullamcorper sit amet. Vestibulum suscipit molestie lectus in sagittis. Ut ipsum urna, tempor eget libero sagittis, gravida fringilla orci. Sed efficitur porta enim, eu auctor neque dignissim non. Suspendisse vitae purus at purus tristique pulvinar. Ut sed eros commodo, luctus diam sit amet, pulvinar tellus. </p>
</div>
</section>