My website was created using bootstrap and CSS. I have a list displayed on the side in a normal screen size, such as on a computer or laptop. However, when the screen size is reduced to less than 500px (mobile), I want the list to drop to the bottom of the page.
To achieve this, I used the bootstrap class hidden-md-down to remove certain divs when the page collapses, which has been working great so far.
You can view an example on CodePen here: https://codepen.io/anon/pen/qwZxbm. In the example, the bottom photo disappears on smaller screens due to a bootstrap class being used to hide it. However, the list does not drop all the way to the bottom of the page as intended.
Here is a snippet of the sidebar on the page:
<div class="row">
<!-- Sidebar -->
<div class="col-sm-4">
<div class="sidebar">
<div class="sidebar-section">
<h5><span>Post</span></h5>
<a href="#"><img src="#" title="new" alt="photo"></a>
</div>
<div class="hiddenmobile">
<div class="sidebar-section">
<h5><span>Latest Blog Posts</span></h5>
<?php foreach($posts as $post): { ?>
<ul style="list-none;">
<li><strong><a style="color:lightgreen;" target="_blank" href="<?php echo site_url('/Blog/'.$post['slug']);?>"><?php echo $post['title']; ?></a></strong></li>
</ul>
<?php } endforeach; ?>
</div>
</div>
<div class="sidebar-section hidden-md-down">
<h5><span>Photo</span></h5>
<a href="#"><img src=“#” title="new Gift Ideas" alt="photo"></a>
</div>
</div>
</div>
CSS The @media query doesn't seem to be working properly to move the div with class 'hiddenmobile' to the bottom of the page.
@media(max-width: 575px) {
.hiddenmobile{
display: flex!important;
flex-direction: column-reverse!important;
}
}