0

I have downloaded the bootstrap dashboard sample and is looking for following behavior:

enter image description here

The two side sections are in same div, is it then possible to merge the main between the two sidebar sections on mobile? I guess push pull wont work here?

<div class="container-fluid">
<div class="row">
    <div class="col-xs-12  col-sm-3 col-md-2 sidebar">
        <div>
            top
        </div>
        <div class="col-md-push-4">
            bot
        </div>
    </div>
    <div class="col-xs-12 col-xs-offset-0 col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div>map</div>
    </div>
</div>

philomath
  • 324
  • 2
  • 13
Thomas Segato
  • 4,567
  • 11
  • 55
  • 104

1 Answers1

0

With Bootstrap 3 your best option is probably to have a duplicate of 'Bot Side' with both being hidden or shown using hidden-xs and visible-xs. V3 relies on float for its grid system and is slightly less (pardon the pun) flexible than V4 (which uses flexbox).

Note: You will need to click 'Expand Snippet' to fully view the breakpoint features of Bootstrap that make this function.

.wrapper { 
  background: blue; 
  color: white; 
  padding: 1rem;
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="wrapper">
        Top Navigation
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-12">
          <div class="wrapper">
            Top Side
          </div>
        </div>
    
        <div class="col-xs-12 hidden-xs">
          <div class="wrapper">
            Bottom Side (Sidebar)
          </div>
        </div>
      </div>
    </div>
      
    <div class="col-xs-12 col-sm-8 pull-right">
      <div class="wrapper">
        Main
      </div>
    </div>
  </div>

  <div class="row visible-xs">
    <div class="col-xs-12">
      <div class="wrapper">
        Bottom Side (Small Screen Only)
      </div>
    </div>
  </div>
</div>
Robert
  • 6,881
  • 1
  • 21
  • 26
  • I just started the project, would it make sense to move to V4? – Thomas Segato Oct 20 '17 at 15:37
  • Depends on the needs/scope of your project. V4 just had its 2nd beta release so you'd need to weigh the features vs. potential stability issues. It also makes some significant deviations from V3 so there is a bit of a learning curve to some of the new class names / formatting. – Robert Oct 20 '17 at 15:47
  • OK, thanks for your reply. Ill wait some days to see if others answers arises I would be really sad having the same code twice. But thanks your answer is highly appreciated. – Thomas Segato Oct 20 '17 at 16:01
  • One option you might consider is loading the content into 'Bot Side' dynamically (either via AJAX or through whatever base your project is powered through). That way even if it is ultimately in the final output twice you're pulling the content from a single source so it's easier to update/maintain. – Robert Oct 20 '17 at 17:06