0 votes
1 view
in Web Technology by (22.4k points)

I'm making a responsive layout with a top fixed navbar. Underneath I have two columns, one for a sidebar (3), and one for content (9). Which on the desktop looks like this

navbar

[3][9]

When I resize to mobile the navbar is compressed and hidden, then the sidebar is stacked on top of the content, like this:

navbar

[3]

[9]

I would like the main content at the top, so I need to change the order on mobile to this:

navbar

[9]

[3]

I found this article   which covers the same points, but the accepted answer has been edited to say that the solution no applies to the current version of Bootstrap.

How can I reorder these columns on mobile? Or alternatively, how can I get the sidbar list-group into my expanding navbar?

Here is my code:

<div class="navbar navbar-inverse navbar-static-top">

  <div class="container">

    <a href="#" class="navbar-brand">Brand Title</a>

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

    </button>

    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->

      <li class="active"><a href="#">Home</a></li>

      <li><a href="#">FAQ</a></li>

    </ul>

   </div>

  </div>

</div><!--End Navbar Div-->

    <div class="container">

  <div class="row">

    <div class="col-lg-3">

  <div class="list-group">

    <a href="#" class="list-group-item">

    <h4 class="list-group-item-heading">Lorem ipsum</h4>

    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>

  </div>

</div><!--end sidebar-->

<div class="col-lg-9">

  <div class="panel panel-default">

    <div class="panel-body">

      <div class="page-header">

     Main Content

    </div>

  </div>

</div><!--end main content area-->

1 Answer

0 votes
by (40.3k points)

You can't change the order of columns on smaller screens but you can definitely change that on large screens.

Hence, you can change the order of your columns like this:

<!-- For Main Content-->

<div class="col-lg-9 col-lg-push-3">

</div>

<!--For Sidebar-->

<div class="col-lg-3 col-lg-pull-9">

</div>

By default, this will display the main content first. So in mobile, the main content will be displayed first. Try using col-lg-push and col-lg-pull to reorder the columns in large screens and display the sidebar on the left and main content on the right.

Welcome to Intellipaat Community. Get your technical queries answered by top developers !


Categories

...