I have been attempting to change this list to a horizontal layout for smaller screen sizes without success. I have tried various methods but nothing seems to be working. Even though it may be a simple task, as a beginner in Bootstrap, I am currently working on creating a Layout Shifter pattern.
Below is the HTML and CSS code snippet:
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
background-color: #E57373;
}
li {
display: block;
}
@media (min-width: @screen-sm-min) {
.menu li {
display: inline;
width: 100%;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="menu">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<ul>
<li><a style="cursor: pointer;">Home</a></li>
<li><a style="cursor: pointer;">Contact</a></li>
<li><a style="cursor: pointer;">About Us</a></li>
</ul>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12" style="background-color: #FFCDD2">
<p>The layout shifter pattern emphasizes responsiveness, utilizing multiple breakpoints across different screen sizes. This method allows content to adjust without dropping below other columns, making it more complex to maintain due to significant differences between major breakpoints which may require changes within elements rather than just overall content layout.</p>
</div>
</div>
</div>