Twitter Bootstrap Question posted in

Website blog page 2 sidebars problem on Mobile-Twitter bootstrap

I have a blog page using bootstrap 4 which has left and right sidebars and the main content.

On Desktop, It works perfectly fine.

But On Mobile phone they stacked in this order:- left-sidebar>content>right-sidebar.

What I want is that on mobile phone, they must come in this order:- content>left-sidebar>right-sidebar

Desktop View

Mobile View

I have made a demonstration for this

body {
padding: 40px;
}
.left-sidebar, .content, .right-sidebar {
min-height: 300px; margin-bottom: 40px;border: 1px solid #aaa;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>

<main>
<div class="container text-center">
<div class="row">
<div class="col-md-2">
<div class="left-sidebar p-4">Left Sidebar</div>
</div>
<div class="col-md-7">
<div class="content p-4">Content</div>
</div>
<div class="col-md-3">
<div class="right-sidebar p-4">Right Sidebar</div>
</div>
</div>
</div>
</main>
Tags:

2

Answers


  1. 0

    You can use the CSS order property at the mobile break-point.

    body {
  padding: 40px;
}

.left-sidebar,
.content,
.right-sidebar {
  min-height: 300px;
  margin-bottom: 40px;
  border: 1px solid #aaa;
}

@media only screen and (max-width: 800px) {
  .col-md-2 {
    order: 2;
  }
  .col-md-7 {
    order: 1;
  }
  .col-md-3 {
    order: 3;
  }
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />

<main>
  <div class="container text-center">
    <div class="row">
      <div class="col-md-2">
        <div class="left-sidebar p-4">Left Sidebar</div>
      </div>
      <div class="col-md-7">
        <div class="content p-4">Content</div>
      </div>
      <div class="col-md-3">
        <div class="right-sidebar p-4">Right Sidebar</div>
      </div>
    </div>
  </div>
</main>
    Login or Signup to reply.
  2. 0

    I think you have use media query or Grid-layout in CSS.

    The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search