2

I am trying to use Bootstrap to split a left aligned sidebar into 2 different parts whenever the screen size gets to be near mobile device resolution. This StackOverflow post sets up what I am trying to do, but as can be seen from the image below, I encounter column wrapping issues when trying to get the sidebar to display as one connected section.

The image below shows the top of the sidebar in green, bottom of the sidebar in blue, and the main content section outlined in red. I am just trying to connect the top and bottom of the sidebars at this particular screen size.

BootstrapSidebarSplitImg (Can't paste img until my rep is higher.. >.< )

Here is the code I have pulled directly from the link I referred to earlier. The code is the same, but for some reason the bottom sidebar column is getting wrapped to the bottom of the text for the previous content section. 

@media (min-width: 768px) {
  .col-sm-pull-right {
      float: right;
  }
}
.lower {
  clear: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta charset="UTF-8">
  <title>test Sidebar Split</title>
  <link rel="stylesheet" href="style/main.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="upper col-sm-3" style="background:red">
        <h3>I want to be <b>above</b> the main content on small screens!</h3>
      </div>
      <div class="col-sm-9 col-sm-pull-right" style="border: 3px solid blue">
        <h1>Main content</h1>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
      </div>    
      <div class="lower col-sm-3" style="background:green">
        <h3>I want to fill the white space above!</h3>
      </div>
    </div>
  </div>
  
  <!-- scripts at bottom -->
  <script
     src="https://code.jquery.com/jquery-3.1.1.min.js"
     integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
     crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

I would prefer to find a solution that doesn't require having to do something completely different like show/hiding sections.

Any ideas would be greatly appreciated! Thanks!

Community
  • 1
  • 1
Louis iaeger V
  • 31
  • 7

1 Answers1

1

Welp, thanks to Google Chrome's developer tools I was able to find out that the code was fine, it was just getting reset during runtime by the Bootstrap code. Once I realized that, all I needed to do was add "!important" to the float right statement and it started working.

@media (min-width: 768px) {
  .col-sm-pull-right {
      float: right !important;
  }
}
.lower {
  clear: left;
}
Louis iaeger V
  • 31
  • 7